1.手机端经常会用到这样的效果。
2.实现如下，
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>lineTitle</title> 7 <style> 8 .textLine { 9 width: 100%; 10 padding: 5px 2em; 11 } 12 .line { 13 display: inline-block; 14 width: calc((100% - 6em) / 2); 15 height: 1px; 16 background-color: #999; 17 vertical-align: middle; 18 } 19 .text { 20 padding: 0 .5rem; 21 } 22 </style> 23 </head> 24 25 <body> 26 <div class="textLine"> 27 <span class="line"></span> 28 <span class="text">企业视频</span> 29 <span class="line"></dpan> 30 </div> 31 </body> 32 </html>
3.之前有见过用伪元素实现的，但是无法透明背景。