Remove Underline in CSS

CSS, or Cascading Style Sheets, is a style sheet language that is used to describe the look and formatting of a document written in HTML. One of the many things you can do with CSS is to remove or add underline to elements like text, or links. In this article, we will go through the process of removing underline in CSS.

Code Snippet

To remove underline from an element using CSS, the property you are going to use is the ‘text-decoration’ property. The following code snippet shows how you can implement it.

a {
  text-decoration: none;
}

Code Explanation

CSS operates by assigning certain properties to elements. In the code snippet above, we are giving instructions to the ‘hyperlink’ element, as defined by the a tag.

text-decoration is a property in CSS that changes the appearance of inline content. It can be used to set the text format to underline, overline, line-through or even blink.

In our scenario, we want to remove the underline, so we set the text-decoration to none. This essentially instructs the browser to display the text associated with the a tag without underlining it.

Remember, the browser default behaviour is to underline hyperlinks. However, this code overrides the default behaviour for a cleaner look.

To see the changes, save your css file, link it to your desired HTML file and refresh or open it in a web browser.

In summary, to get rid of underlines for any desired elements in CSS, you can use the text-decoration property and set its value to none. Happy coding!