如何让::before伪元素换行时显示在当前行首（Chrome兼容问题）

问题复现 #

通过::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>

实际运行存在以下异常：

• 调整视口宽度导致高亮文本恰好处于换行后的行首位置时，三角形指示器会错误显示在上一行末尾，而非当前高亮行的行首
• 该问题仅在Chrome浏览器中复现，Firefox下表现正常
• 目标效果：三角形指示器始终定位在对应高亮内容片段的左上角位置

原因说明 #

Chrome等Webkit内核浏览器对行内（inline）元素的定位上下文处理逻辑和Firefox存在差异：设置了position: relative的行内元素因自动换行被拆分为多个独立行内片段时，Chrome默认将整个元素的起始位置作为绝对定位子元素/伪元素的锚点，不会跟随换行后的片段更新锚点坐标，因此出现指示器错位。

修复方案 #

方案1：保留原有绝对定位逻辑（推荐） #

添加box-decoration-break: clone属性，让行内元素换行拆分后的每个片段都生成独立的定位上下文，同时将偏移量整合到transform属性中，避免盒模型边距计算在拆分片段时出错，兼容Chrome和Firefox：

.highlight {
  position: relative;
  background-color: yellow;
  /* Webkit内核浏览器需要加前缀 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.highlight::before {
    content: "";
    border-left: 5px solid transparent;
    border-bottom: 5px solid #47484a;
    border-right: 5px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    /* 原top/left偏移整合到transform中 */
    transform: rotate(-45deg) translate(-3px, -0.5px);
}

方案2：流布局实现（兼容性更好） #

不使用绝对定位，将伪元素设置为行内块元素，和文本同属正常流布局，会自然跟随文本换行，不存在定位锚点错位问题，兼容所有主流浏览器：

.highlight {
  background-color: yellow;
}

.highlight::before {
    content: "";
    display: inline-block;
    border-left: 5px solid transparent;
    border-bottom: 5px solid #47484a;
    border-right: 5px solid transparent;
    transform: rotate(-45deg);
    /* 调整和文本的对齐、间距 */
    vertical-align: top;
    margin: 2px 2px 0 0;
}

内容的提问来源于stack exchange，提问作者tikva