How to Get Rid of a Link Underline in HTML
Removing the underlines from links in HTML documents requires CSS (Cascading Style Sheet) code. You need to use CSS to set the "text-decoration" property of all anchor tags -- the tags that create links in HTML -- to "none" to remove the underlines. When selecting all anchor tags in CSS, you can just use "a" as your selector. You can add this CSS code between "<style>" tags in your HTML file, and this is the quickest and easiest method. When you want to effect only a single tag, you can also place the property and value in the tag itself.
Instructions
-
-
1
Open your Web page in Notepad and locate the "<style>" tags between the "<head>" tags towards the top of the code. Add the "<style>" tags if you do not see them:
<style type="text/css">
</style>
-
2
Write a CSS selector that selects the tag you want to effect, in this case "a." Use the "text-decoration: none" property-value pair to tell the browser not to display any lines under your links:
a {
text-decoration: none;
}
-
-
3
Remove the underline of a single link within its anchor tag. Use the same "text-decoration: none" property-value pair as you would use in a style sheet:
<a href="path/to/link.html" title="My Link" style="text-decoration: none;">My Link</a>
-
4
Add the underline back to links when users hover over them by adding this code to your style sheet:
a :hover {
text-decoration: underline;
}
-
1
Tips & Warnings
When removing underlines from links, add a new style to the link that will separate it from regular text, such as "font-weight: bold;" for bold text.