The text-decoration property is mostly used to remove underlines from links:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
a:link { text-decoration: none; } a:visited { text-decoration: overline; } a:hover { text-decoration: line-through; } a:active { text-decoration: underline; } </style> <body> <p><b><a href="text_hey.html" target="_blank">Do NOT click on this unvisited page!</a></b></p> <p><b><a href="index.html" target="_blank">Click on this link to see the changes.</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> |
Do NOT click on this unvisited page! Click on this link to see the changes. Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Note: a:active MUST come after a:hover in the CSS definition in order to be effective. |
The line-through and overline, when assigned to visited link, do not work in any of my browsers (IE, Chrome & Firefox). I don't know why. I read that browsers have a limit on how visited links are styled, but I could not find any specifics. Firefox does put a dotted rectangle on a visited link, though, which is interesting.