1.可以使用CSS的text-decoration属性和text-decoration-style属性来实现。
p {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: black;
text-decoration-thickness: 2px; /* 虚线的厚度 */
text-underline-offset: 4px; /* 离文字的距离 */
}
常用的取值:none
:默认值,不设置任何装饰效果。underline
:设置文字下方
显示下划线overline
:设置文字上方
显示划线line-through
:设置文字中间
显示删除线blink
:设置文字闪烁
text-decoration: underline dotted red;
2.伪元素实现下划线
伪元素是CSS中一种非常有用的技巧,可以用来为元素添加额外的内容或样式。我们可以利用::after伪元素来实现文本下划线的效果。首先,需要给元素设置position: relative属性,然后通过::after伪元素添加一个绝对定位的下划线,在调整下划线的位置和大小即可。
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #000;
}
3.背景图(色)
p {
background-image: url('underline.png');
background-position: bottom;
background-repeat: repeat-x;
background-size: 100% 3px; /* 下划线的高度和宽度 */
}
p {
background: linear-gradient(to right, black 2px, transparent 2px);
background-size: 100% 4px; /* 虚线的高度和宽度 */
background-position: 0 100%; /* 将背景定位在底部 */
}