CSS伪类before,after制作左右横线文字效果

1，这种方法比利用边框和背景图做出的效果更好更利于控制和修改2，缺点是伪类在IE8上兼容有些问题.container{width: 1000px; margin: 10px auto; border: 1px solid red;}h3.title {col

1，这种方法比利用边框和背景图做出的效果更好更利于控制和修改
2，缺点是伪类在IE8上兼容有些问题

.container{width: 1000px; margin: 10px auto; border: 1px solid red;}h3.title {color:#F2AE11;font-size:1.3em;margin-bottom:3em;text-align:center;font-weight:500; line-height:1.1;}h3.title span {display: block; font-size: 3em;color: #212121;position: relative;}h3.title span:before, h3.title span:after {content: ''; position: absolute; top: 52%;background: #494949; width: 9%;height: 2px;}h3.title span:before{left: 25%; } h3.title span:after {right: 25%;}

<div class="container"> <h3 class="title">Welcome to <span>www.王经理</span></h3> </div>

上一篇：河池企业网站如何进行页面布局 下一篇：CSS图片在DIV上下垂直居中方法