Home Web Design CSS CSS Text Underline Hover Effect | Expand Underline On Hover

CSS Text Underline Hover Effect | Expand Underline On Hover

November 26, 2019

5225

How we can create an underline effect of links on the website? Solution: See this CSS Text Underline Hover Effect, Expand Underline On Hover.

Previously I have shared the CSS link hover effect, but its underline expands and covers the whole text on hover. Basically, this type of text underlines the effect used by many popular websites nowadays. They use the underline effect of links like internal and external, this effect helps the users to indicate the link and customize the default link style.

Today you will learn to create Expand Link’s Underline On Hover. Basically, there are some dummy texts and placed 3 links or hyperlink tags inside the paragraph. At this time links are blank because this is just an example. Firstly below the link, you will see just a gradient underline, but when you will hover on it then it will expand its height and covers the whole text.

So, Today I am sharing CSS Text Underline Hover Effect. There I am using pure CSS for creating the effect and the whole program is based on simple HTML and CSS. This is just a basic work that’s why we don’t have to use any library or js, but a CSS expert can create this because it is a little tricky. You can use this effect for styling links on your website.

If you are thinking now how this text underline effect actually is, then see the preview given below.

Preview Of Expand Underline On Hover

See this video preview to getting an idea of how this hover effect looks like.

https://webdevtrick.com/wp-content/uploads/color-underline-expand.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Text Underline Hover Effect Source Code

Before sharing source code, let’s talk about it. First I have placed a dummy paragraph block inside the HTML paragraph tag, all the texts are generated using Lipsum. Inside the paragraph, I have placed some hyperlinks in texts with a class name. I placed 3 hyperlink tags on text inside the paragraph.

Now using CSS first I have placed all the text in the middle of the screen, as you can see in the preview. At first, I have created a blank content with gradient and put its height 5% to pretend likes an underline. And on hover, the content will expand to 100% height that is the whole concept of the program. I have placed the blank content using CSS :after tag.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this effect you have to create only 2 files. One for the HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Text underline hover | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>

<p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec <a href="#" class="Link">sollicitudin</a> erat. Orci varius natoque penatibus et magnis dis parturient montes,
   nascetur <a href="#" class="Link">ridiculus</a> mus. Integer nec tortor tempus, bibendum lorem auctor, efficitur nibh. Nulla <a href="#" class="Link">vestibulum dignissim</a> felis, 
   commodo dictum est dignissim id." <strong>- Lorem Ipsum</strong>
</p>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>Text underline hover | Webdevtrick.com</title>

</head>

<body>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec <a href="#" class="Link">sollicitudin</a> erat. Orci varius natoque penatibus et magnis dis parturient montes,

nascetur <a href="#" class="Link">ridiculus</a> mus. Integer nec tortor tempus, bibendum lorem auctor, efficitur nibh. Nulla <a href="#" class="Link">vestibulum dignissim</a> felis,

commodo dictum est dignissim id." - Lorem Ipsum

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url('https://fonts.googleapis.com/css?family=Sulphur+Point&display=swap');
* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Sulphur Point', sans-serif;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  cursor: pointer;
}

strong {
  margin-top: 16px;
  display: block;
  font-weight: 700;
}

p {
  padding: 24px;
  max-width: 760px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.9;
}

.Link {
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: black;
  padding: 0 1px;
  transition: color ease 0.3s;
}

.Link::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 5%;
    left: 0;
    bottom: 0;
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    transition: all ease 0.3s;
  }

.Link:hover {
    color: white;
  }

.Link:hover::after {
      height: 100%;
    }

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url('https://fonts.googleapis.com/css?family=Sulphur+Point&display=swap');

* {

box-sizing: border-box;

}

html, body {

font-family: 'Sulphur Point', sans-serif;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

a {

cursor: pointer;

}

strong {

margin-top: 16px;

display: block;

font-weight: 700;

}

p {

padding: 24px;

max-width: 760px;

font-size: 28px;

font-weight: 300;

line-height: 1.9;

}

.Link {

position: relative;

text-decoration: none;

display: inline-block;

color: black;

padding: 0 1px;

transition: color ease 0.3s;

}

.Link::after {

content: '';

position: absolute;

z-index: -1;

width: 100%;

height: 5%;

left: 0;

bottom: 0;

background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

transition: all ease 0.3s;

}

.Link:hover {

color: white;

}

.Link:hover::after {

height: 100%;

}

That’s it. Now you have successfully created CSS Text Underline Hover Effect, Expand Link Underline On Hover. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.