Oh how useful text-emphasis would be if it didn’t affect line height.
So, say you want to point at the exact place in a stack trace where an error is in HTML.
You might think, “I’ll use the text-emphasis CSS property” but that messes up line height.
So, instead, with a span surrounding the error location, try this (just realised the lh/rlh units are now widely supported):
```css
span.error-column::before {
color: deeppink;
content: '^';
position: relative;
margin-right: -1ch;
top: 1rlh;
}
```
(Deeppink colour optional.) ;)
@aral I use a similar snippet (for debugging)::
```css
[data-debug] {
position: relative;
--debug-color: red;
&::before {
content: attr(data-debug);
position: absolute;
top: 0;
left: 0;
white-space: pre;
translate: 0 -100%;
padding: 0.2rem;
font-size: 0.6rem;
background: white;
color: var(--debug-color);
outline: 1px solid var(--debug-color);
}
&:hover::before {
opacity: 0;
}
}
```
```html
<span data-debug="value">...<span>
```