×

Decorate Text with Underline and Other Effects Using text-decoration [7/16]

You can style your text more using the text-decoration property. It can take on the following values:

  1. underline underlines the text
  2. line-through strikes the text through
  3. overline puts a line over the text
  4. none removes the above effects.

You can apply multiple effects separating them by commas.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Decorate Text with Underline and Other Effects Using text-decoration:</title> </head> <body> <h1>Graceful Degradation vs. Progressive Enhancement</h1> <p>A Web interface fully compliant with <span class="under">Graceful Degradation</span> would behave similarly to an interface meeting <span class="over">Progressive Enhancement</span>.</p> <ul> <li><span class="over">Progressive Enhancement</span> is a paradigm limited to Web interfaces while <span class="under">Graceful Degradation</span> is a much broader concept.</li> <li><span class="over">Progressive Enhancement</span> sets the vector of motion <span class="under">(from the simple to the complex),</span> <span class="through">however for Graceful Degradation it is not so important</span>.</li> <li>Progressive Enhancement insists on the priority of content, <span class="through">but for Graceful Degradation it is secondary</span>.</li> </ul> </body> </html>
CSS
h1 { font-size: 24px; }
HTML Academy

Experimenting with text-decoration:

  1. Elements with the under class should be underscored.
  2. Elements with the over class should be overscored.
  3. Elements with the through class should be struck through.
Theory Check Next