Auto Highlighting and Underlining Text Effect

Written by @kerixa 24 May 2020

Texts and paragraphs are important parts of all web pages. To show the users when they are in the text or to make it less boring when a long article is read, add some on hover effects. Below you can find how text can be highlighted and underlined when mouse goes through them.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Code+Pro:300'>
<style>
body {
  font-family: 'Source Code Pro', sans-serif;
}

.wrap {
  padding: 1% 2%;
}

.underlined {
  color: black;
  flex: 1;
  font-size: 1em;
  line-height: 1.2;
  text-decoration: none;
  background-image: linear-gradient(to right, yellow 0, yellow 100%);
  background-position: 0 1.2em;
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: background .5s;
}
.underlined:hover {
  background-size: 100% 100%;
}
.underlined--thin {
  background-image: linear-gradient(to right, black 0, black 100%);
}
.underlined--thick {
  background-position: 0 -0.1em;
}
.underlined--offset {
  background-position: 0 0.2em;
  box-shadow: inset 0 -.5em 0 0 white;
}
.underlined--gradient {
  background-position: 0 -0.1em;
  background-image: linear-gradient(to right, yellow 0, lightgreen 100%);
}
.underlined--reverse {
  background-position: 100% -0.1em;
  transition: background 1s;
  background-image: linear-gradient(to right, yellow 0, yellow 100%);
}
p{
margin-top: 1em;
}
</style>

<div class="wrap">
<p><a href="#" class="underlined underlined--thin">I'm a very long text with an underline effect</a></p>
<p><a href="#" class="underlined underlined--thick">I'm another very long highlighted link.</a></p>
<p><a href="#" class="underlined underlined--offset">I'm another very long link and I'm an artist you know.</a></p>
<p><a href="#" class="underlined underlined--gradient">I am Rainbow</a></p>
<p><a href="#" class="underlined underlined--reverse">I'm another long link and I don't like lorem.</a></p>
</div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best 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!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300