Free CSS course. Sign Up for tracking progress →

CSS: Horizontal lines

Underlining is often used to boost text. It shows the importance of the current word or text (and it's also often used to show links in a document). Another means of styling text is to use strike-through to show a piece of text that is wrong, e.g., "Don't do this or that."

The text-decoration property with three basic properties is used for this kind of text modification:

  • underline - underline text
  • line-through - Redraw text
  • overline - overline text

The none value is used to remove underscores from links. This is often used to remove the underscore from links, which are there by default

<a href="#">Ordinary link underlined by default</a>
<a href="#" class="text-decoration-none">Non-underlined link</a>
.text-decoration-none {
  text-decoration: none;
}

Instructions

Add a paragraph with the class set to line to the editor and set it to have underlined text. Add styles to the <style> tag