mastodon.ar.al is one of the many independent Mastodon servers you can use to participate in the fediverse.
This is my personal fediverse server.

Administered by:

Server stats:

1
active users

Oh how useful text-emphasis would be if it didn’t affect line height.

Aral Balkan

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