:after选择器-----分割线
分割线：
让span中的文字覆盖分割线，需要：给div和span设置同样的background-color，并且给span设置z-index。
接下来就是margin和padding的调整了。
效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 div{ 8 width:300px; 9 height: 20px; 10 background-color:#FFFFFF; 11 text-align: center; 12 position: relative; 13 } 14 div:after { 15 content: ""; 16 width: 100%; 17 height: 1px; 18 background-color: red; 19 position: absolute; 20 top: 50%; 21 left: 0; 22 } 23 div span { 24 z-index:1; 25 position: relative; 26 background-color:#FFFFFF; 27 padding:0 5px; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="hot"> 33 <span>茶品营销</span> 34 </div> 35 </body> 36 </html>
分隔线：
效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .range { 8 width: 500px; /*这里不设置div的高度，下边用padding来显示高度*/ 9 background: rgba(0, 0, 0, 0.6); 10 position:absolute; 11 } 12 .range a { 13 text-decoration: none; 14 float: left; 15 text-align: center; 16 width: 50%; 17 display: inline-block; 18 padding: 10px 0; /*设置padding用来撑高盒子的高度*/ 19 color: #fff; 20 } 21 .range:after { 22 content: ""; 23 width: 1px; 24 height: 70%; 25 background-color: #fff; 26 position: absolute; 27 left: 50%; 28 top: 5px; /*div的高度是10px,取一半的值*/ 29 } 30 </style> 31 </head> 32 <body> 33 <div class="range"> 34 <a href=" ">优惠幅度6.8折</a> 35 <a href=" ">已有999人购买</a> 36 </div> 37 </body> 38 </html>
