手机端放在线条中间的标题

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.之前有见过用伪元素实现的，但是无法透明背景。