One of the advantages of creating my personal site from scratch instead of using the finished theme is that I start with the default browser settings and gradually add my own colors. I try to keep the site from inflating, but personalization is important. We need to find a compromise between the Spartan pages of Hacker News and Craigslist on the one hand and the congestion of the old MySpace on the other.

Somehow I came across a site with fancy animated underscores for links, and I wanted to realize the effect. But it is important for me to use pure CSS, because for the sake of such frivolous things, it is not necessary to add JavaScript, which can cause problems with performance or user-friendliness (see hijacking the scroll bar ).

This is how the effect looks now:

Implementation

Drawing lines under the text is a surprisingly complex topic . Everything depends on how far you are ready to deviate from the standard and what details you are worried about (for example, going past the portable letter elements ).

I explored two approaches . Both of them, in fact, remove the standard text-decoration and add an imitated border with the help of pseudo-elements . Then this border is animated by CSS transitions . Unfortunately, these solutions have one drawback: they do not work normally if the link covers more than one line. The underline appears only in the first line.


In the end, I found the Shaw CodePen , devoid of this flaw, and changed the effect to your taste.


Here is the corresponding code. Play with them, you can at repl.it .

a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0%100%;
    background-repeat: no-repeat;
    background-size: 0%2px;
    transition: background-size .3s;
}
a:hover {
    background-size: 100%2px;
}

Let us consider this decision in more detail.

First, turn off the standard design text-decoration.

We have to use a background image because it can cover several lines. Although you can take a real picture, but we are talking only about the line, so we use a linear gradient that will generate an image for us. Usually it is used to create a gradient between two different colors, but we need the underlining to be the same color as the link, so we use currentColor for both the beginning and the end of the gradient. currentColortells the browser to use the color of the element from the color property .

Use background-positionto place the image in the bottom left corner. The value 0%corresponds to the horizontal position, and 100%- to the vertical.

Turn off background-repeat to prevent the creation of multiple copies of the image.

Using background-size we specify zero width and height of two pixels. Zero width means that the underscore appears only when you hover, otherwise the picture is not visible.

Set the transition to the size of the background, so any property change will take a 0.3second.

When hovering over a link, we change the image width to 100%create a full underline, and transitionprovide animation.

That's all! I am very pleased with the concise code. If you want to add something similar to your site, feel free to take this implementation or look at some other animated underscore effects .