[分享]css做文字左右线

在网页设计中，文本装饰是一个重要的元素。使用CSS可以实现各种文本样式，其中之一就是文字左右线。文字左右线是指在文字左右两侧添加一条直线，使得文字更加醒目，并起到分隔作用。 p { : relativ...

在网页设计中，文本装饰是一个重要的元素。使用CSS可以实现各种文本样式，其中之一就是文字左右线。文字左右线是指在文字左右两侧添加一条直线，使得文字更加醒目，并起到分隔作用。

 p {
        position: relative;
        padding-left: 50px; /*左侧线宽度*/
        padding-right: 50px; /*右侧线宽度*/
    }
    p:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 30px; /*线条宽度*/
        height: 100%;
        border-left: 3px solid #000; /*线条样式*/
    }
    p:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 30px; /*线条宽度*/
        height: 100%;
        border-right: 3px solid #000; /*线条样式*/
    } 

首先，我们需要给需要添加左右线的文本添加一个相对定位的position属性，并为左右各添加一个宽度为50px的padding。接着，使用:before和:after伪元素分别在左右两侧创建宽度为30px的边线。伪元素的content属性为空，使边线成为一个不可见元素。最后通过border属性设置边线的样式。

通过CSS完成左右线的效果需要掌握一定的技巧，同时需要注意到不同浏览器的兼容性问题。采用上述方法，在主流的浏览器中可以实现稳定的左右线效果。