Is there a way to make the ::before pseudo element appear at the beginning of the line instead of at-CodePudding

I'm trying to add a little triangle indicator for highlighted text:

I added it with the ::before pseudo-element:

.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 >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>

But if the highlight happens to be on the beginning of a line (which happens if you change the screen size), the indicator appears at the end of the previous line instead of the beginning of the current one.

Is there a way to tell the browser to not do this? It doesn't happen in Firefox so I'm assuming it's an issue with Chrome

CodePudding user response：

Use a gradient to create that shape

.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 >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 >imperdiet libero. In nec leo tempor, egestas massa quis, iaculis leo.</span> Donec mattis mauris placerat congue egestas. Aliquam vehicula dictum scelerisque.
</p>

CodePudding user response：

Make the highlight class an inline-block appears to work. But that'll break some minor details such as word-breaking.

.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 >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>