Removing the default underlines from links using CSS

CSSWeb DevelopmentFront End Technology

By default, all links in HTML are decorated with an underline. We can remove this underline using CSS text-decoration property.

Syntax

The syntax of CSS text-decoration property is as follows −

Selector {
   text-decoration: /*value*/
}

Example

The following examples illustrate CSS text-decoration property.

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   padding: 5px;
   box-shadow: inset 0 0 5px violet;
}
a {
   font-style: italic;
   text-decoration: none;
}
</style>
</head>
<body>
<a href="#">Demo</a>
<p>
<a href="https://example.com/">Example domain</a>
</p>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   width: 50%;
   text-align: right;
   color: green;
   border: thin dashed red;
}
a {
   text-decoration: none;
}
a:last-child {
   color: inherit;
   background-color: moccasin;
}
</style>
</head>
<body>
<div>
<a href="#">Link Demo</a>
<p>
Watch this: <a href="https://example.com/">Example site</a>
</p>
</div>
</body>
</html>

Output

This gives the following output −

raja
Published on 09-Jan-2020 14:09:41
Advertisements