html设置一条横线在标题的两侧,通过伪类在标题两侧添加装饰线.html

Title

.container{

width: 1000px;

margin: 10px auto;

border: 1px solid red;

}

h3.title {

color: #F2AE11;

font-size: 1.3em;

margin-bottom: 3em;

text-align: center;

font-weight: 500;

line-height: 1.1;

}

h3.title span {

display: block; /*设置为块级元素会独占一行形成上下居中的效果*/

font-size: 3em;

color: #212121;

position: relative; /*定位横线(当横线的父元素)*/

}

h3.title span:before, h3.title span:after {

content: ''; /*CSS伪类用法*/

position: absolute; /*定位背景横线的位置*/

top: 52%;

background: #494949; /*宽和高做出来的背景横线*/

width: 9%;

height: 2px;

}

h3.title span:before{

left: 25%; /*调整背景横线的左右距离*/

}

h3.title span:after {

right: 25%;

}

Welcome to Snapshot

一键复制

编辑

Web IDE

原始数据

按行查看

历史