There are many ways to remove underline from hyperlink but first we need to understand what a hyperlink is:
What is hyperlink in HTML?
A hyperlink is a word, group of words, or an image that links to another web page or document. Generally the text is underlined with a bright color and when you move the cursor over this link, the arrow turns into a small hand.
The <a> tag defines a hyperlink and the most important attribute of <a> tag is href attribute that indicates the link to other document or web page.
The syntax of hyperlink is:
<a href=”document or website url“>text which you want to link</a>
Here href attribute specifies the destination of a link.
Example:
<a href=”https://www.itbloggertips.com/”>IT Blogger Tips</a>
Result:
How to remove underline from hyperlink?
This article will show you how to remove underline from hyperlink in html.
You can add following style attribute in regular hyperlink code to remove underline from hyperlink.
style=”text-decoration: none”
Text-Decoration Syntax:
text-decoration: none | [ underline || overline || line-through || blink ] | inherit
- none: used for no special decorations.
- underline: Used for underlines the text.
- overline: used to put a line above the text.
- line-through: Used to put a line through the middle of the text.
- Blink: Used to make the text blink.
- inherit: This element will have the same text-decoration setting as the parent.
Remove Underline from Hyperlink Code in HTML
You need to add only one thing in above code i.e. the style attribute value with the specified value from above syntax. Following examples will show you different type of text-decoration styles along with remove underline from hyperlink.
Example-1: text-decoration: none
<a href=”https://www.itbloggertips.com/” style=”text-decoration: none”>IT Blogger Tips</a>
Result:
Example-2: text-decoration: underline
<a href=”https://www.itbloggertips.com/” style=”text-decoration: underline”>IT Blogger Tips</a>
Result:
Example-3: text-decoration: overline
<a href=”https://www.itbloggertips.com/” style=”text-decoration: overline”>IT Blogger Tips</a>
Result:
Example-4: text-decoration: line-through
<a href=”https://www.itbloggertips.com/” style=”text-decoration: line-through”>IT Blogger Tips</a>
Result:
Example-5: text-decoration: blink
<a href=”https://www.itbloggertips.com/” style=”text-decoration: blink”>IT Blogger Tips</a>
Result:
Example-6: text-decoration: inherit
<a style=”text-decoration: inherit;” href=”https://www.itbloggertips.com/”>IT Blogger Tips</a>
Result:
If you liked this article, don’t forget to share with your friend and colleagues.
Register your e-mail address to get free informative articles. It will take less than 10 sec’s to register your email address.
