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>