Underline element using CSS

10 October 2016

We’ve wanted to share with our experience in CSS design long time ago and today we’ve decided to publish the first post about some great feature such as underline elemnt with CSS. Most of us have seen such effect as appearing line under the element. But the line appears with animation from the side or from the center and makes all the elemnt underlined.

We’d like to say that it is not border value but the other one which allows you not to use any scripts or flash. So. let’s start our lesson.

Underline styles

It could be a lot of types of underlines styles. It depends to your fantasy. We are going to show you three of them: appearing line from the left side, from the center and from the right side of the element.

Example 1. Right side line

HTML

First of all, let’s create some element. For example, a tag which is link.

<a href="#">name of the link</a>

CSS

Usually underlined element is made by using a text-decoration value but there is no animation at all. We will skip such elemnt and will use pseudoelement :before. It will help us to add the animation to the element.

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

We have added block wrapping to this elemnt which will not allow our line go outside the element borders and will allow us to place the link anywhere inside the parent block. Let’s continue with the pseudoelement :before.

a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 0;
    bottom: 0;
}

We have added absolute positioning to pseudoelemnt to make the line inside the tag and to disable the line to go outside it’s borders. Line height will be 2px, width is 0, color is red and the transition value is responsible for animation. And now we have to add the hover effect.

a:hover:before {
    width: 40%;
}

Thereby we’ve added the width value with 40% from the whole width of the current element. Now I will tell you about the examples where we will use the other one pseudoelemnt.

Example 2. Central line

HTML

We will use the same tag.

<a href="#">name of the link</a>

CSS

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background-color: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}

We have added one more pseudoelemt :after, made positioning of 50% from the left and added one more animation to make smooth animation. Such value places our lines in the middle of the element.

a:hover:before {
    width: 50%;
    left: 0;
}
a:hover:after {
    width: 50%;
}

Our lines should appear from the middle while your cursor is placed on the tag. That’s why we’ve changed left positioning to 0 for our pseudoelement :before which makes our line appearing to the left side.

Example 3. Right side line

HTML

<a href="#">name of the link</a>

CSS

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    right: 0;
    bottom: 0;
}
a:hover:after {
    width: 40%;
}

So now we have a line appearing from the right side of the element.