<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.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%;
}
</style>
</head>
<body>
<div class="container">
<h3 class="title">Welcome to <span>Snapshot</span></h3>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/czorg/p/7991747.html