html文本居中左右有横线,CSS伪类实现中间文字两边横线效果

利用CSS伪类实现中间文字两边横线效果

效果图：

实现代码：

CSS伪类实现中间文字两边横线效果

body {

margin: 0;

}

.login_content {

position: absolute;

text-align: center;

min-width: 450px;

}

.login_content div {

font: 400 20px Helvetica, Arial, sans-serif;

line-height: 20px;

}

/*CSS伪类用法*/

.login_content div:after, .login_content div:before {

background: #000000;

content: "";

height: 1px;

position: absolute;

top: 50%;

width: 20%;

}

/*调整背景横线的左右距离*/

.login_content div:before {

left: 0;

}

.login_content div:after {

right: 0;

}

中间文字，两边横线