Showing Underline When Hovering A Link – Simple Stuff

Showing an underline for a link on a website is simple. Here are the steps:

Demo: http://kennykee.com/demo/css-underline

1) Within <head></head> of your HTML page, create <style></style> if not exist. For example,

<head>
<style></style>
</head>

2) Let’s say you have a link <a class=”mylink” href=”http://kennykee.com”>My Website</a>. Note the class=”mylink”. We need this to show the underline effect.

3) Update your <style> tag to following:

<head>
<style>
.mylink{
text-decoration: none;
}
.mylink:hover{
text-decoration: underline;
}
</style>
</head>

Done. http://kennykee.com/demo/css-underline

Full code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
  	    .mylink{
            text-decoration: none;
			font-size: 50px;
			font-family: arial;
			margin-left: 20px;
		}
		.mylink:hover{
			text-decoration: underline;
		}
    </style>
  </head>

  <body>
	 <a class="mylink" href="http://kennykee.com">My Website - Hover Here</a>
  </body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *


eight − 1 =