Learning More About Text Decoration


by Jeremy Caudle
code

I've only ever used line-through, none, and underline when working with the text-decoration property. After learning about the new text-decoration-thickness property a couple of weeks ago, I thought it would be wise to learn more. I never knew overline was an option. I love that I can continue to learn more and more about CSS the more I work with outside of the things I've done in the past.

Text decoration styles

  • dashed*
  • dotted*
  • double*
  • line-through
  • none
  • solid*
  • underline
  • wavy*
  • overline
  • underline with thickness specified
  • * requires line style of underline or overlinet to be specified as well

View the code:

HTML and JS 
<h1>Text decoration styles</h1>
    <ul class="main">
        <li>dashed*</li>
        <li>dotted*</li>
        <li>double*</li>
        <li>line-through</li>
        <li>none</li>
        <li>solid*</li>
        <li>underline</li>
        <li>wavy*</li>
        <li>overline</li>
        <li>underline with thickness specified</li>
        <li><em>* requires line style of underline or overlinet to be specified as well</em></li>
    </ul>
CSS 
:root {
            --primary-color: black;
            --secondary-color: blue;
            --tertiary-color: red;

        }
	
		.main {
			line-height: 2;
		}

		.main li {
		transition: text-decoration-thickness .2s ease-in-out;
		}

        .main li:first-of-type {
            text-decoration: underline dashed;
						text-decoration-style: dashed;
        }

        .main li:nth-of-type(2) {
						text-decoration-line: underline;
						text-decoration-style: dotted;
        }

        .main li:nth-of-type(3) {
            text-decoration: underline double;
        }

        .main li:nth-of-type(4) {
            text-decoration: line-through;
        }

        .main li:nth-of-type(5) {
            text-decoration: none;
        }

        .main li:nth-of-type(6) {
            text-decoration: underline solid;
        }

        .main li:nth-of-type(7) {
            text-decoration: underline;
        }

        .main li:nth-of-type(8) {
            text-decoration: underline wavy var(--secondary-color);
        }

        .main li:nth-of-type(9) {
            text-decoration: overline solid var(--tertiary-color);
            margin-top: .5rem;
        }

        .main li:nth-of-type(10) {
            text-decoration: underline solid var(--primary-color) 5px;
            margin-bottom: .5rem;
        }
				
				.main li:hover, .main li:focus  {
            text-decoration-thickness: 3px;
        }

Tags