css两端文字中间横线

CSS中，我们可以通过<text-decoration>属性为文字添加装饰效果，比如下划线、删除线等。但是，有时候我们需要为文字添加一条横线作为分隔符或者强调，该如何实现呢？

其实在CSS3中，添加横线的方法非常简单，只需要使用<text-decoration-line>属性，并将属性值设为line-through即可，代码如下：

 p {
    text-decoration-line: line-through;
  } 

上述代码会为

标签中的文字添加一条中间的横线，效果如下：

这是一条带横线的文字

需要注意的是，该属性并不会影响字体的样式、大小等，只会为文字添加一条横线，因此我们也可以通过其他CSS属性来调整文字的样式。比如：

 p {
    text-decoration-line: line-through;
    font-weight: bold;
    font-size: 24px;
    color: red;
  } 

上述代码会让文字加粗、加大字号、变红色，并添加一条中间的横线，效果如下：

这是一条带横线的文字

如果需要为文字添加多条横线，我们也可以使用<text-decoration>属性，并将属性值设为underline或overline等，代码如下：

 p {
    text-decoration: underline overline;
  } 

上述代码会为

标签中的文字添加一条上划线和一条下划线，效果如下：

这是一条带横线的文字

总之，在CSS中添加中间横线非常方便，可以通过简单的样式设置实现。如果你想让文字更加生动有趣，不妨尝试将横线搭配其他装饰效果一起使用吧！