Home > Mobile >  What is the purpose of value "none" in "text-decoration" in CSS?
What is the purpose of value "none" in "text-decoration" in CSS?

Time:11-09

I just can ignore this property and I will get the same result, right?

If so, what is the meaning of using text-decoration: none; as a declaration in CSS.

This is my first question.

I'm trying to understand CSS and it's declaration's properties.

CodePudding user response:

If the element you are applying the CSS to has no default text-decoration, then yes there is no immediate functional benefit to applying that CSS rule.

However, consider you are using the <a> HTML element (or anchor element). This has the default CSS style:

text-decoration: underline;

You may want to remove this underline (for whatever reason). This is a scenario when you could use the style rule a {text-decoration: none;}, to remove the underline.

CSS libraries like Bootstrap may also apply unwanted CSS rules that you wish to remove, or maybe you are already applying a CSS rule to an element, but want to remove that styling in specific cases.

You might also apply CSS rules of this nature as a preventative measure, to mitigate the risk of future CSS changes applying rules where you may not want them to.

In short, you use CSS rules like text-decoration: none; to remove existing CSS rules.

The MDN web docs is a great source to learn about CSS, and the other fundamental technologies of the web, If you want to learn more. Here is a link to their page on the text-decoration CSS rule.

Hope this helps.

CodePudding user response:

One example of things affected by the none would be <a>/href=””links, that to most browsers, become blue once turned into links. using text-decoration: none; shows the browser that it should not add anything extra to the text, thus keeping it consistent with the other type on your page.

For more examples and documentation on the style, read MDN Docs on text-decoration

  •  Tags:  
  • css
  • Related