Css 实现标题(或图片等)左右横线效果 – 珊瑚贝

在设计网页时，很多时候要实现在标题（或图片等）元素两侧加上横线以突出主题的效果，比如：

我们可以通过 css 的 before 和 after 伪类来实现这个效果，代码如下：

.title:before{content:"";position:absolute;width:240px;height:2px;top:50%;background-color:#5a659f;left:18%;}
.title:after{content:"";position:absolute;width:240px;height:2px;top:50%;background-color:#5a659f;right:18%;}

实际效果：.title{font-size:20px;}<br /> .title:before{content:””;position:absolute;width:80px;height:2px;top:50%;background-color:#5a659f;left:18%;}<br /> .title:after{content:””;position:absolute;width:80px;height:2px;top:50%;background-color:#5a659f;right:18%;}

.title-line-test:before{content:””;position:absolute;width:200px;height:2px;top:50%;background-color:#5a659f;left:0;}
.title-line-test:after{content:””;position:absolute;width:200px;height:2px;top:50%;background-color:#5a659f;right:0}

注意事项：

父元素要设置 position:relative，其他属性根据实际情况调节即可。