(hover) text-decoration: underline;
| Browser |
|
|---|
The text-decoration property adds decoration to text.
When you set this property with pseudo-classes for the A element, the underline of the link can be displayed according to the state of the link.
In the following examples, the underline is displayed only when you mouse over the link.
(When this style is set, the default underline must be removed. (removes the links underline))
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
| Property | Value | Explanation |
|---|---|---|
| text-decoration | underline | horizontal line under the text |
- text decoration
(Other values can be seen)
Example
<html>
<head>
<title>TAG index</title>
<style type="text/css">
a { text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<p><a href="index.html">Link Styles</a></p>
</body>
</html>
- Output