前端工程学习日记第17天

#伪类:before :after做左右画线标题效果

经常可以看到这样的标题设计是在左右有一条横线中间是文字的做法，可以使用伪类选取器before/after做到这个效果喔！
##关键步骤1：
在元素本身做position: relative;，让before/after以元素为定位点
##关键步骤2：
在before/after上做position: absolute;，设定top在一半的位置，并且设定宽高填入背景色
##关键步骤3:
分别在before/after设定左右定位位置就完成啦～
用伪类选取器可以让程序码更简洁乾净，是不是很棒咧！
原始码codepen:
https://codepen.io/rainiewang/pen/EJLomv?editors=1100