Default underlining of links

Default underlining of links in HTML looks very boring and unattractive. Standard links are blue and underscore, and do not respond on mouse hover. In this lesson, you will learn how to make link underlines more interactive.


Стандартная ссылка


Remove link underline

Before making the underlining of links more creative, you need to remove the underlining from the links altogether. Add just one property text-decoration with the value of nonewhich defaults to underline.


// CSS
a {
    text-decoration: none;
}


Underline links on hover

Now let’s make a simple underlining of the links on mouse hover. When we hover the mouse, the link is instantly underlined, but as soon as we remove it, the underline disappears. Most of the links on the Internet are implemented using the usual hover-effect. That’s boring too, let’s make the underline process even more fun with animation elements.


a:hover {
    text-decoration: underline;
}


Link underline animation

Let our links be underlined on the left and right sides, as well as in the center. Let’s create HTML– markup for three links with different classes and place them in the parent container left-wing.


// HTML

General CSS styles


@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap");
body {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    font-size: 24px;
}
.links {
    margin: auto; /* автоматическое задание отступов */
    width: 80%; /* ограничение по ширине родителя */
}
a {
    text-decoration: none; /* ссылка без подчеркивания */
    position: relative; /* относительное позиционирование */
    color: darkred; /* цвет ссылок */
}


Next, we write CSS styles for each class separately. The trick is that we will not animate the links themselves, but their pseudo-elements before… For classes left и right, we will draw lines (underscore) with zero width. When you hover over the link, the line will take on a width of 100%, the effect of a smooth underline of the link will appear. The trick with underlining links is to change the line width from 0% to 100%.

Link underline to the left


.left a::before {
    content: ""; /* отображает псевдоэлемент */
    bottom: 0; /* позиция линии снизу */
    right: 0; /* позиция линии справа */
    position: absolute; /* абсолютное позиционирование */
    width: 0%; /* ширина линии */
    height: 4px; /* толщина линии */
    background-color: darkred; /* цвет линии */
    transition: 0.6s; /* плавный переход */
}
.left a:hover:before {
    width: 100%; /* новая ширина линии */
    left: 0; /* исчезновение линии слева */
}


Underline link to the right


.right a::before {
    content: "";
    bottom: 0;
    right: 0;
    position: absolute;
    width: 0%;
    height: 4px;
    background-color: darkred;
    transition: 0.6s;
}
.right a:hover:before {
    width: 100%;
}


Center underline

Drawing an underline from the center is fundamentally different from the previous two options. Immediately set the width of the underline to 100%. Property transform with the value of stairs will decrease the width of the element to 0, and on hover will increase the width of the element to its original size – 100% width along the horizontal axis.


.center a::before {
    content: "";
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: darkred;
    transition: 0.6s;
    transform: scaleX(0);
}
.center a:hover:before {
    transform: scaleX(1);
}


Take a look at an example at CodePen