学习是一个长期积累的过程，积累的多了也就有经验了，有能力了；
无论再忙也要坚持学习，继续我的学习！
实现的效果图：
我们能够看到，文字的两边出现了一小节横线；
实现思路：
第一步：先实现一个外层的 div ，即图中的长方形部分，这个的作用是便于将文字部分放置在想要放置的地方；
第二步：在上面的div中再写一个 <div> 放置文字，或者用一个 <p> 来实现也是好的 ;
第三步：再来一个 <div> 用来实现横线，然后使用定位将横线定位到想要的位置，调整层级关系即可；
完整代码：
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>line-behind 在文字背后实现一条横线
</
title
>
<
style
>
.container
{
width
:
500
px
;
height
:
100
px
;
border
:
1
px
solid red;
margin
:
0
auto;
position
: relative;
}
.wrap
{
width
:
200
px
;
height
:
50
px
;
/* border: 1px solid green; */
margin
:
0
auto;
margin-top
:
25
px
;
z-index
:
2
;
position
:relative;
text-align
:center;
line-height
:
50
px
;
background-color
:
#fff
;
font-size
:
16
px
;
}
.line
{
width
:
300
px
;
border
:
1
px
solid red;
position
: absolute;
left
:
50
%
;
margin-left
:
-150
px
;
top
:
50
px
;
z-index
:
-1
;
}
<
/
style
>
</
head>
<
body>
<
div
class=
"container"
>
<
div
class=
"wrap"
>
我的背后出现了一条横线
</
div
>
<
div
class=
"line"></
div>
</
div
>
</
body>
</
html>