[分享]css3文字加横线

在Web设计中，有时候我们需要给一段文字添加横线来突出重点，CSS3提供了多种方式来实现这个效果。/ 第一种方式：使用textdecoration属性 / .textline { textdecora...

在Web设计中，有时候我们需要给一段文字添加横线来突出重点，CSS3提供了多种方式来实现这个效果。

/* 第一种方式：使用text-decoration属性 */
.text-line {
    text-decoration: line-through;
}

/* 第二种方式：使用伪元素 */
.text-line:before {
    content: "";
    display: block;
    height: 1px;
    background-color: #000;
}

/* 第三种方式：使用下划线模拟横线 */
.text-line {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
.text-line:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
} 

以上三种方式都能实现文字加横线的效果，我们可以根据实际情况选择其中一种来使用。