Molly Whiteall i want for christmas is CSS support for underlines to extend below SVG pseudoelements 😔 (as in the first image)
Paul@molly0xfff Great. I'll add that to the list of things that I can't unsee and will now haunt me. Anything else you would like to point out, perhaps some egregious kerning issues?
David Revoy
@davidrevoy i'm looking for something that can be applied without editing the HTML, and with SVGs rather than unicode chars
Nathan Knowler@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.
@knowler thank you!
@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?)
Literal Cosmo Catalano@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]
cthos 🐱@molly0xfff completely unrelated to the problem but I love that you have those at all. It’s wonderful.
Daniele Pantaleo 🦥
@molly0xfff still better than dealing with thermal printers, where there's no way to avoid underline break at every space, unless you raster the print first (and only if the raster program supports it) 🙃
@ozone89 well I have that to be grateful for then 😅
Aaron Bieber (no relation)@molly0xfff All I want for Christmas is for CSS to be Turing-complete.
heracl.es@molly0xfff It's possible by setting a unicode character (fallback) in the CSS content, then style it with a custom webfont (e.g. convert the SVG with IcoMoon).
That's how I manage such link indicators in my personal website, although I move them to the right gutter instead of inline. Example: https://heracl.es/geary/
The *filesize difference versus an SVG is negligible. Of course, opinions may vary between what's good practice between icon fonts and SVGs.
@heracles thank you!
Bret Carmichael@molly0xfff Not technically how your asking to do it, but you can achieve the visual effect using a background gradient instead of underline.
Mark Krueger@molly0xfff I am not a typographer; but that first image just looks so “right”. I also wish for this.
Mykola K@molly0xfff what I want for Christmas is SVG supporting embedding g/view into text/tspan as a character. So we can have something like this:
```svg
<tspan>Some text <view viewBox="..."><!-- some image here --></view> rest of the text</tspan>
```
To embed emoji, logo or other visual stuff in text within SVG. And don't positioning it with coordinates and hope it would be ok.