all i want for christmas is CSS support for underlines to extend below SVG pseudoelements šŸ˜” (as in the first image)

@molly0xfff Try adding:

```css
a.wikipedia-link::after {
/* … */
content: " "; /* However many spaces you need */
white-space: pre;
}

@knowler the ::after is what's holding the SVG:

```css
a[href^="https://en.wikipedia.org/"]::after
{
content: url("/assets/images/wikipedia.svg");
display: inline-block;
width: 0.8em;
margin-left: 0.25rem;
}
```

@molly0xfff You might be able to mix text with the image?

```css
content: " " url("/assets/images/wikipedia.svg") " ";
```

@molly0xfff Oh, that doesn’t work either.
@molly0xfff Hacky solution: use `::before` for the icon and `::after` with `content: " ā€œ; whitespace: pre` to underline it.
@knowler seems like you'd end up with the underline sticking out on the wrong end?
@molly0xfff I was thinking to use `::before` for the icon and then `::after` for the underline, then use absolute positioning to move the icon to the end, however, if the link text ever wraps onto a separate line, the whole approach breaks down.

@molly0xfff Alright, solution is here: https://knowler.dev/demos/SDgpyGc?codepen

This uses the `::after` with some preserved whitespace to extend the underline, then instead of using `content` to set the image, I set the icon as the `background-image` of that same pseudo-element.

ā€œDecorating an underlined linkā€ demo by Nathan Knowler

@knowler thank you!