Remove Underline from Links

How To Remove Underline From Link in CSS

(There are 2 ways to remove those lines under a link using CSS)

To remove lines under links in CSS set text-decoration property to none

Underlines below your link can be annoying when you want to make clickable text without having to display a line underneath it.

There are 3 ways to remove those lines under a link using CSS. What are they?

Sometimes they interfere with the text flow or worse, your UI design.

Not all clickable text needs an underline.

In CSS the line under a link is controlled by text-decoration property.

The property text-decoration is a shorthand for 4 different properties:

1. text-decoration-line (controls presence of line under text , above text or under a link )
2. text-decoration-thickness (controls thickness of line above or under the link or text)
3. text-decoration-color (controls color of the underline)
4. text-decoration-style (can be solid , wavy , double )

As you can see you can even control color of the wavy underline.

I don’t think overline is used that often, have you ever seen it anywhere? 😅

How to remove line under a link

To remove underline from a link using inline CSS you can set text-decoreation to none :

This example used inline css , where code was typed directly into style attribute of the element.

But how do you remove underline from all links on your page with a single CSS command?

CSS code to remove an underline from all hyperlinks

To remove underline from all hyperlinks on your page, assign text-decoration: none to the a tag itself as shown in this example:

You should place this code inside your style tags in your HTML page source code.

Another way to remove line from a link in CSS

You can also use text-decoration-line property:

Note: this will remove an underline from all links on your page.

Here’s a link to this page with text-deocration-line: none applied:

Hide line under a link by changing its color to background color

There is a use case for this.

And that’s when you still want the line to appear on hover.

This will set color of the underline to white, same as background.

(Sure, text-decoration-line:none; can still be used to same effect.)

This will change color of your underline on a text link on mouse hover.

How to remove underline from links in different states

Remember that hyperlinks have 4 different states:

1. a:link link was not visited, hovered, or clicked on a link
2. a:visited this link has been visited (clicked on)
3. a:hover mouse cursor is currently hovering over the text link
4. a:active mouse button is held down but not yet released

So here’s the code you would use to disable underline on any of link states:

a:link < text-decoration: none >a:visited < text-decoration: none >a:hover < text-decoration: none >a:active

Источник

text-decoration

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and the newer text-decoration-thickness property.

Try it

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can’t remove the decoration. For example, in the markup

This text has some emphasized words in it.

, the style rule p < text-decoration: underline; >would cause the entire paragraph to be underlined. The style rule em < text-decoration: none; >would not cause any change; the entire paragraph would still be underlined. However, the rule em < text-decoration: overline; >would cause a second decoration to appear on «some emphasized words».

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

text-decoration: underline; text-decoration: overline red; text-decoration: none; /* Global values */ text-decoration: inherit; text-decoration: initial; text-decoration: revert; text-decoration: revert-layer; text-decoration: unset; 

The text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.

Values

Sets the kind of decoration used, such as underline or line-through .

Sets the color of the decoration.

Sets the style of the line used for the decoration, such as solid , wavy , or dashed .

Sets the thickness of the line used for the decoration.

Formal definition

• text-decoration-color : currentcolor
• text-decoration-style : solid
• text-decoration-line : none

• text-decoration-line : as specified
• text-decoration-style : as specified
• text-decoration-color : computed color
• text-decoration-thickness : as specified

• text-decoration-color : a color
• text-decoration-style : discrete
• text-decoration-line : discrete
• text-decoration-thickness : by computed value type

Formal syntax

Examples

Demonstration of text-decoration values

.under  text-decoration: underline red; > .over  text-decoration: wavy overline lime; > .line  text-decoration: line-through; > .plain  text-decoration: none; > .underover  text-decoration: dashed underline overline; > .thick  text-decoration: solid underline purple 4px; > .blink  text-decoration: blink; > 

p class="under">This text has a line underneath it.p> p class="over">This text has a line over it.p> p class="line">This text has a line going through it.p> p> This a class="plain" href="#">link will not be underlineda>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks. p> p class="underover">This text has lines above em>andem> below it.p> p class="thick"> This text has a really thick purple underline in supporting browsers. p> p class="blink"> This text might blink for you, depending on the browser you use. p> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The individual text-decoration properties are text-decoration-line , text-decoration-color , text-decoration-style , and text-decoration-thickness .
• The text-decoration-skip-ink , text-underline-offset , and text-underline-position properties also affect text-decoration, but are not included in the shorthand.
• The list-style attribute controls the appearance of items in HTML and lists.

Found a content problem with this page?

This page was last modified on Apr 20, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Remove Underline from link HTML

all add or use text-decoration:none; CSS property we need write style=”” attribute to our Anchor/link starting tag.
Then we can use text-decoration:none; property inside style=”” attrubute like this
style=”text-decoration:none;”

Full HTML CODE for inline CSS

    Click Me  

Using External or Internal CSS

If you are using external CSS or internal CSS then use this text-decoration:none; we need to select the link/anchor tag first.
We can select that using Tag ID or just by TAG NAME a.
And we can use text-decoration:none; CSS like shown below.

Full HTML and CSS for Internal CSS

   a Click Me  

Remove the blue color with underline form HTML link

To remove the default blue color from link just use CSS color:black; property.
Where you can choose any color like green, yellow, pink, gray, lightgray and more.

Using Inline CSS

    Click Me  

Using internal CSS

   a Click Me  

FAQ – About Remove underline from link CSS

How to remove the underline from a hyperlink in html

To remove the underline from a hyperlink in html, we can use External/Internal CSS or just by using Inline CSS we can remove the Underline from a link / Hyperlink in HTML.
If you have only few Hyperlinks inside your HTML Document the we recommend you to use Inline CSS.

remove the underline from a hyperlink in html using INLINE CSS

But if you have Multiple Hyperlinks inside your HTML Document then we recommend you to use External or Internal CSS.

   a Click 1 Click 2 Click 3  

How to remove the underline from the link in HTML without CSS

you can use JQuery. But at the end you have to use $(“a”).css(); which will also use CSS but with jQuery.

text-decoration none not working

If your text-decoration:none; CSS is not working that make sure that haven’t misspelt anything.
And you can try these two methods (Inline and Internal CSS) to make sure everything is correct.
But I recommend InlineCSS because no other External CSS can OverWrite it.

HTML link without underline and color

To add a link without underline and color we can use color property along with text-decoration property.
Where in color property we have to give color like this (color:black;).
and in text-decoration we have to give none (text-decoration:none;) to remove underline from links.

how to remove underline in CSS

in CSS (Internal or External CSS) we have to use the text-decoration property.
Where using text-decoration:none; we can remove the text decorations like Underline etc.

HTML underline css

If you want to ADD underline to a text using CSS, then you can add that underline using text-decoration:underline; property.
Which will add underline to selected HTML element/Text.

HTML link without underline and color

To add HTML link without underline and color we have to use color property along with text-decoration property.
Where text-decoration we have to give none (text-decoration:none;) to remove underline from links.
and color property we have to give color like this (color:black;).
Where you can choose any color like green, yellow, pink, gray, lightgray and more.

HTML remove underline from link – remove underline from anchor tag

you can use inline or external CSS for that.
Where you need to select anchor tag using a in external or Internal CSS and in inline CSS you just need to add style=”” attribute inside anchor tag’s starting tag.
By using text-decoration:none; you can remove underline from anchor tag.

text-decoration none html

In HTML, text-decoration none (text-decoration:none;) removes all the Text element stylings like Underlines.
So if you want to remove Underlines from Links you can use this text-decoration:none; CSS property to get rid of that underline from the texts/links.

css remove underline from link / how to remove underline from hyperlink css

To remove Underlines from Links using CSS we have to use CSS text-decoration:none; property. This CSS property will set text Decoration to NONE (Which will remove the Underlines and Other Text Decoration from the Selected TAG).

How to remove underline from link in html

Its Simple, if you want to know how to remove underline from link in html, then just use CSS text-decoration:none; property.
Where this text-decoration:none; will remove link styles like Underline from links in HTML.
CODE:

Источник