主要使用的是伪类元素，思路如下：
- 父元素为块级元素，且定位为relative，目的是方便伪类元素相对齐定位。
- 伪类元素绝对定位，
left和right设置为0让其与父元素等宽，top设置为50％是为了让其垂直居中。 - 将块级元素里面的真正内容部分也相对定位，并且z－index的值要大于伪类元素的。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p{
text-align: center;
position: relative;
width: 300px;
}
p span{
padding: 0px 5px;
z-index:1;/*核心部分*/
position: relative;/*核心部分*/
background-color: #fff;
}
.target::after{
z-index: 0;
background-color: lightcoral;
content: "";
height: 1px;/*核心部分*/
position: absolute;/*核心部分*/
left: 0;/*核心部分*/
right: 0;/*核心部分*/
top: 50%;/*核心部分*/
}
</style>
</head>
<body>
<p class="target">
<span>通知</span>
</p>
</body>
</html>
