good hack. But this will make all links show in a separate line. especially on mobiles this doesnt work, if links are too long.

I couldn’t get it to work when I wanted to change the text to different text.

You’ll want to make sure there’s some sort of wrapper around your article in the HTML — maybe it’s even the <article> tag — and then scope the CSS to it.

For example… this will select all links:

a { color: red; }

But this will only select links within an article:

article a { border: red; }

“Hover link this link this link”

Also, with any of the effects that only change a colour (and not also a shape), care should be taken to ensure that the colour change contrasts sufficiently to be seen as a difference for people who have extreme colour blindness. I believe the ratio would be at least 3:1 for an effect like this if you’re aiming for AA compliance.

a {
    position: relative;
    color: $content_linkcolor;
    transition: color .3s ease-in-out;
    z-index: 0;
    &:after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        width: 0;
        background-color: $content_linkcolor;
        transition: width .3s ease-in-out;
        z-index: -1;
    }
    &:hover {
        color: white;
    }
    &:hover:after {
        width: 100%;
    }
}