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%;}

实际效果：

注意事项：

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