css偽類實現文字兩側划線效果，效果如下：
代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>
css偽類的學習
</title>
<meta charset="gb2312">
<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>