[分享]css文字红色波浪线

在CSS样式设计中，文字红色波浪线是一种常见的效果，可以用于突出显示文本中的错误或警告信息。下面介绍如何使用CSS代码实现这种效果。.textredwavy { color: red; textdec...

在CSS样式设计中，文字红色波浪线是一种常见的效果，可以用于突出显示文本中的错误或警告信息。下面介绍如何使用CSS代码实现这种效果。

.text-red-wavy {
color: red;
text-decoration: none;
position: relative;
}
.text-red-wavy::after {
content: "";
display: block;
border-bottom: 3px solid red;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.text-red-wavy:hover::after {
transform: scaleX(1);
}

首先，在CSS中定义一个类名为text-red-wavy的样式，设置文字颜色为红色、文本装饰为none，同时设置一个相对定位。接着，在该类名样式的::after伪元素中，设置border-bottom为3px实线红色边框，位置设为绝对定位，居左下方，宽度为100%。同时，通过transform：scaleX（0）和transition属性，实现当鼠标悬停于红色文字上时，波浪线从左向右渐变显示出来的效果。

以上是实现文本红色波浪线效果的CSS代码，可以根据实际需要进行调整。利用这种样式可以使需要提醒或警示的文字更加醒目突出，提高网页的用户体验。

江苏,常州,武进区