css 文字下划线_text-underline-优快云博客

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%; /* 将背景定位在底部 */
}