css伪类实现⽂字两侧划线效果css伪类实现⽂字两侧划线效果，效果如下：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>
css伪类的学习
</title>
<meta charset="gb2312">
css特效文字
<style>
.div06{
width:900px;
height:30px;
margin:0 auto;
background:#f00;
text-align:center;
color:#fff;
font-size:20px;
}
.div06:before,.div06:after
{
content:"";
width:250px;
height:2px;
background:#fff;
display:block;    /*1.⾸先使伪类显⽰⽅式为块级元素*/
position:relative ;  /*2.通过相对定位的⽅式控制两侧内容的位置*/
}
.div06:before{    /*3.控制左侧横线的位置*/
top:15px;
left:50px;
}
.div06:after    /*4.控制右侧横线的位置*/
{
top:-15px;
right:-600px;
}
</style>
</head>
<body>
<!--css的伪类实现⽂字两侧横线效果-->
<div class="div06">
css的伪类实现⽂字两侧横线效果
</div>
soulsjie--2017-10-17
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。