HTML Underline Text Effect on Hover

Written by @kerixa 1 March 2021

If you have an important text in your HTML web page, one classic way is to underline it. But don't leave underlined texts simple. With the following them you can add effects to the underlined texts and make them stylish on mouse move and hover.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import 'https://fonts.googleapis.com/css?family=Lora:400,700';

* {
    box-sizing: border-box;
}

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

body {
    border: 8px solid #00B388;
}

a {
    cursor: pointer;
}

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

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

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

    .link-1::after {
        content: '';
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 5%;
        left: 0;
        bottom: 0;
        background-color: #00B388;
        transition: all ease 0.3s;
    }

    .link-1:hover {
        color: white;
    }

        .link-1:hover::after {
            height: 100%;
        }

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

.link-2::before, .link-2::after {
	content: '';
	position: absolute;
	background-color: #00B388;
	z-index: -1;
	height: 5%;
}

.link-2::before {
	width: 0%;
	left: 0;
	bottom: 0;
	transition: width ease 0.4s;
}

.link-2::after {
	width: 100%;
	left: 0;
	bottom: 0;
	transition: all ease 0.6s;
}

.link-2:hover::before {
	width: 100%;
}

.link-2:hover::after {
	left: 100%;
	width: 0%;
	transition: all ease 0.2s;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<p>
  <a>HTML </a> <a class="link-1" href="#">Best</a> Codes.<br>HTML<a class="link-2">Best</a> Free" <strong>Codes</strong>
</p>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font><a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Designer Diva, Jirgensons E, vamsi, wapmohin, azmir
advertisement 2