实现文字后面加一条横线的效果

学习是一个长期积累的过程，积累的多了也就有经验了，有能力了；

无论再忙也要坚持学习，继续我的学习！

实现的效果图：

我们能够看到，文字的两边出现了一小节横线；

实现思路：

    第一步：先实现一个外层的 div ，即图中的长方形部分，这个的作用是便于将文字部分放置在想要放置的地方；

    第二步：在上面的div中再写一个 放置文字，或者用一个

来实现也是好的 ;

    第三步：再来一个 用来实现横线，然后使用定位将横线定位到想要的位置，调整层级关系即可；

完整代码：

line-behind 在文字背后实现一条横线

.container{

width: 500px;

height: 100px;

border: 1px solid red;

margin: 0 auto;

position: relative;

}

.wrap{

width: 200px;

height: 50px;

/* border: 1px solid green; */

margin: 0 auto;

margin-top: 25px;

z-index:2;

position:relative;

text-align:center;

line-height:50px;

background-color: #fff;

font-size:16px;

}

.line{

width: 300px;

border: 1px solid red;

position: absolute;

left: 50%;

margin-left: -150px;

top: 50px;

z-index: -1;

}

我的背后出现了一条横线

效果：

法二：

效果：

vertical-align：Middle；并没有实现居中的效果。