css中红色弧形下划线 |css3快捷键

a {
position: relative;
text-decoration: none;
color: #000000;
}
a::after {
content: "";
position: absolute;
height: 3px;
border-radius: 50%;
bottom: -4px;
right: 50%;
width: 0;
background-color: #ff0000;
transition: all 0.5s ease-in-out;
}
a:hover::after {
width: 100%;
right: 0;
}

首先，大家选择需要添加红色弧形下划线的a标签，并设置其position属性为relative，以便下面的绝对定位生效。

然后，大家使用a::after伪元素来创建一个在a标签之后的元素，这个元素会成为大家要实现的红色弧形下划线的主要部分。添加content属性以使该元素能够显示在网页上。

接下来，大家设置该元素的主要样式。height、bottom和width属性用于设置线的粗细、位置和长度，而border-radius属性则用于设置弧形下划线的曲率。

值得注意的是，在设置bottom属性时，大家应该在线的下方留出一定的间隙以避免和文字重叠。

最后，大家使用transition属性为该元素添加样式过渡效果，使得红色弧形下划线可以平滑地展开。

在鼠标悬停时，大家使用a:hover::after伪类来实现红色弧形下划线的展开。将width属性设置为100%以展开线条，将right属性设置为0以保持线条在a标签内部而不是居中显示。这样大家就成功实现了红色弧形下划线效果。