生成如图所示的样式纪录，有关z-index

示例图

主要使用的是伪类元素，思路如下：

1. 父元素为块级元素，且定位为relative，目的是方便伪类元素相对齐定位。
2. 伪类元素绝对定位，left和right设置为0让其与父元素等宽，top设置为50％是为了让其垂直居中。
3. 将块级元素里面的真正内容部分也相对定位，并且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%;/*核心部分*/
        }