css 中间横线且不穿过文字

CSS中有时候我们需要在文本中间添加横线，以起到一定的分割作用，但是如果我们直接使用border-bottom属性，很有可能会穿过文字，影响页面的美观度。在这种情况下，我们可以使用如下的方法解决：

    p>
    这是一段需要添加横线的文本/p>
        hr class="hr-text" data-content="OR">
    

通过在文本下面添加一条 hr> 标签，再利用CSS给这条线添加样式，我们就可以实现在文本中间添加横线的效果，而且还可以自定义线条的样式。

    .hr-text {
            color: #666;
            margin-top: 25px;
            margin-bottom: 25px;
        /* 或者根据需求自定义样式 */    }
        .hr-text::before {
            content: attr(data-content);
            display: inline-block;
            background-color: #fff;
            padding: 0 15px;
            position: relative;
            top: -11px;
            left: 50%;
            transform: translateX(-50%);
    }
    

通过上述样式，我们可以让横线的样式与文本的颜色相同，避免了穿过文字的情况。并且通过在 hr> 标签中添加 data-content 属性，我们还可以在横线中间添加自定义的文字，以起到更好的分割作用。当然，这个文字的样式也可以根据需求进行自定义。

总之，以上方法是实现在文本中间添加横线的一个简单且有效的方法，同时它也避免了穿过文字的问题，是我们在实际开发中可以考虑使用的一个样式技巧。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！