示例圖
主要使用的是偽類元素蚜印，思路如下：
- 父元素為塊級元素，且定位為relative留量，目的是方便偽類元素相對齊定位窄赋。
- 偽類元素絕對定位，
left和right設(shè)置為0讓其與父元素等寬楼熄，top設(shè)置為50％是為了讓其垂直居中忆绰。 - 將塊級元素里面的真正內(nèi)容部分也相對定位，并且z－index的值要大于偽類元素的可岂。代碼如下：
<p class="target">
<span>通知</span>
</p>
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%;/*核心部分*/
}
