Molly WhiteMay 2, 2024
all i want for christmas is CSS support for underlines to extend below SVG pseudoelements 😔 (as in the first image)
Show threadNathan KnowlerMay 2, 2024

@molly0xfff Try adding:

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

Show threadMolly White

@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;
}
```

May 2, 2024 at 6:05pmWeb
Show threadNathan KnowlerMay 2, 2024

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

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

Show threadNathan KnowlerMay 2, 2024
@molly0xfff Oh, that doesn’t work either.
Show threadNathan KnowlerMay 2, 2024
@molly0xfff Hacky solution: use `::before` for the icon and `::after` with `content: " “; whitespace: pre` to underline it.
Show threadMolly WhiteMay 2, 2024
@knowler seems like you'd end up with the underline sticking out on the wrong end?
Show threadNathan KnowlerMay 2, 2024
@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.
Show threadNathan KnowlerMay 2, 2024

@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

Show threadMolly WhiteMay 2, 2024
@knowler thank you!
Show threadDavid RevoyMay 2, 2024

@knowler @molly0xfff Yes, as soon an image is in the content, the underline is not working anymore. But it's puzzling, because using pure text in 'content' works for the underline... Eg.

a::after {
content: " ʷ";
font-weight: bold;
color: grey;
}

(unfortunately, it's not the same iconic 'W' font/logo. Maybe it could work with writing it with an appropriate webfont?)

Show threadLiteral Cosmo CatalanoMay 2, 2024

@davidrevoy @knowler @molly0xfff I think that makes sense, actually—"text-decoration" applying to only things that the browser considers text.

So If you used an icon font… [ducks]