div内的span跨越div

Question

<div class="message-unread-headline" id="message-unread-headline" style="display: none;">
  <span>Unread Messages</span>
</div>

.message-unread-headline {
  color: #e91e63;
  display: none;
  margin: 0 10px -10px;
  position: relative;
  text-align: center;

  &:before {
    background: #e91e63;
    content: '';
    height: 2px;
    left: 0;
    padding: 0 10px;
    position: absolute;
    top: 0;
    width: 100%;
  }
  span {
    background: transparent;
    display: inline-block;
    height: 30px;
    padding: 0 10px;
    position: relative;
    top: -11px;
  }
}

它的外观如何

我希望粉红色的线条在到达未读消息文本后立即停止 我尝试使用z-index，但它不起作用。不知道如何防止覆盖的方式

Answer 1

我是如何做到这一点的：

＆＃13;

＆＃13;

.message-unread-headline {
    margin:0;padding:0 10px;
    background:#fff;
    display:inline-block;
    color: #e91e63;
}
h2{

    text-align:right;
    position:relative;
    z-index:2;

}
h2:after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    border-top:solid 2px #e91e63;
    z-index:-1;
}

＆＃13;

<h2>
  <span  class="message-unread-headline">Unread Messages</span>
</h2>

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查这是否对您有帮助。

我已移除width: 100%并将right: 0添加到:before

将background: #fff;提交给span

.message-unread-headline {
  color: #e91e63;
  position: relative;
  text-align: right;
}
.message-unread-headline:before {
  background: #e91e63;
  content: '';
  height: 2px;
  left: 0;
  padding: 0 10px;
  position: absolute;
  top: 0;
  right: 0;
}
.message-unread-headline span {
  background: #fff;
  padding: 0 10px;
  position: relative;
  top: -11px;
}

<div class="message-unread-headline" id="message-unread-headline" >
  <span>Unread Messages</span>
</div>

Answer 3

如果你的目的只是攻击文字，你可以在html

中找到攻击标记