是否有一种方法可以使::before伪元素出现在行开头而不是前一行的末尾?

Question

我正在尝试为高亮显示的文本添加一个小三角形指示器:

我添加了::before伪元素:

.highlight {
position: relative;
background-color: yellow;
}
.highlight::before {
content: "";
border-left: 5px solid transparent;
border-bottom: 5px solid #47484a;
border-right: 5px solid transparent;
position: absolute;
top: -0.5px;
left: -3px;
transform: rotate(-45deg);
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia ligula eget tempus mollis. Maecenas <span class="highlight">maximus</span> interdum libero vel varius. Pellentesque quis varius augue. Phasellus facilisis, turpis et commodo posuere, leo enim egestas magna, id luctus sapien neque eget ligula. Pellentesque a imperdiet libero. In nec leo tempor, egestas massa quis, iaculis leo. Donec mattis mauris placerat congue egestas. Aliquam vehicula dictum scelerisque.
</p>

但是如果高亮显示恰好在一行的开头(如果你改变屏幕大小就会出现这种情况)，指示符就会出现在上一行的末尾，而不是当前一行的开头。

有没有办法告诉浏览器不要这样做?这在Firefox中不会发生，所以我假设这是Chrome的问题

Answer 1

使用渐变来创建这个形状

.highlight {
background: linear-gradient(135deg,#47484a 5px,yellow 0);
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia ligula eget tempus mollis. Maecenas <span class="highlight">maximus</span> interdum libero vel varius. Pellentesque quis varius augue. Phasellus facilisis, turpis et commodo posuere, leo enim egestas magna, id luctus sapien neque eget ligula. Pellentesque a <span class="highlight">imperdiet libero. In nec leo tempor, egestas massa quis, iaculis leo.</span> Donec mattis mauris placerat congue egestas. Aliquam vehicula dictum scelerisque.
</p>

Answer 2

使highlight类和inline-block看起来工作。但是这会破坏一些次要的细节，比如断行。

.highlight {
display: inline-block;
position: relative;
background-color: yellow;
}
.highlight::before {
content: "";
border-left: 5px solid transparent;
border-bottom: 5px solid #47484a;
border-right: 5px solid transparent;
position: absolute;
top: -0.5px;
left: -3px;
transform: rotate(-45deg);
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia ligula eget tempus mollis. Maecenas <span class="highlight">maximus</span> interdum libero vel varius. Pellentesque quis varius augue. Phasellus facilisis, turpis et commodo posuere, leo enim egestas magna, id luctus sapien neque eget ligula. Pellentesque a imperdiet libero. In nec leo tempor, egestas massa quis, iaculis leo. Donec mattis mauris placerat congue egestas. Aliquam vehicula dictum scelerisque.
</p>