How to remove underline in css

Methods to remove underlines in CSS: use text-decoration: none; use border-bottom: 0; use a:link, a:visited and a:hover pseudo-classes to set text-decoration to none; Use outline: none;

How to remove underline in CSS

Underline is usually used for text links, but sometimes You may wish to remove this in CSS. Here's how to accomplish this:

1. Using the text-decoration attribute

text-decoration attribute can Controls text decoration, including underlining. To remove the underline, set this property to none:

<code class="css">a {
  text-decoration: none;
}</code>

2. Use the border-bottom property

The border-bottom attribute can be applied to the bottom border of a text element. Set this property to 0 to remove the underline:

<code class="css">a {
  border-bottom: 0;
}</code>

3. Use pseudo-classes

You can also use pseudo-classes specifically for link elements Remove the underline:

<code class="css">a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}</code>

4. Use the outline attribute

outline attribute to control the border around the element. Set this property to none to remove the underscore:

<code class="css">a {
  outline: none;
}</code>

Note:

• The 1st method is the general method and works for All text elements.
• Methods 2 and 4 are specific to link elements.
• The 3rd method targets link elements in different states, such as unvisited links, visited links and links with the mouse hovering over them.

The above is the detailed content of How to remove underline in css. For more information, please follow other related articles on the PHP Chinese website!