<div class="container">

  <h2 class="mt-5 mb-3">

    <code>text-decoration</code> 

    <small class="f-sm"><a href="https://www.w3.org/TR/css-text-decor-3/">(CSS Text Decoration Level 3)</a></small>

  </h2>

​

  <table class="table table-bordered">

    <colgroup>

      <col style="width: 28.56%">

      <col style="width: 14.28%">      

      <col style="width: 14.28%">

      <col style="width: 14.28%">      

      <col style="width: 14.28%">

      <col style="width: 14.28%">            

    </colgroup>

    <tr>

      <th>

        <code>text-decoration</code>

        <br><small class="f-sm">

          ✓ Works in: Chrome, Firefox<br>

          × Not working in Safari

        </small>                

      </th>

      <td>

        <code>underline</code><br>

        <span style="text-decoration: underline">dojely</span>

      </td>

      <td>

        <code>dotted</code><br>      

        <span style="text-decoration: dotted">dojely</span>

      </td>

      <td>

        <code>underline dotted</code><br>      

        <span style="text-decoration: underline dotted">dojely</span>

      </td>

      <td></td>

      <td></td>

    </tr>     

    <tr>

      <th>

        <code>text-decoration-line</code>

        <br><small class="f-sm">✓ Works in all browsers <br>(except for blink value)</small>

      </th>

      <td>

        <code>underline</code><br>

        <span style="text-decoration-line: underline">dojely</span>

      </td>

      <td>

        <code>overline</code><br>      

        <span style="text-decoration-line: overline">dojely</span>

      </td>

      <td>

        <code>line-through</code><br>       

        <span style="text-decoration-line: line-through">dojely</span>

      </td>    

      <td>

        <code>blink</code><br>       

        <span style="text-decoration-line: blink">dojely</span>

      </td> 

      <td>        

      </td>

    </tr>

    <tr>

      <th>

        <code>text-decoration-style</code>

        <br><small class="f-sm">✓ Works in all browsers<br><br></small>                

      </th>

      <td>

        <code>solid</code><br>

        <span style="text-decoration-style: solid" class="tdl-underline">dojely</span>

      </td>

      <td>

        <code>double</code><br>      

        <span style="text-decoration-style: double" class="tdl-underline">dojely</span>

      </td>

      <td>

        <code>dotted</code><br>       

        <span style="text-decoration-style: dotted" class="tdl-underline">dojely</span>

      </td>    

      <td>

        <code>dashed</code><br>       

        <span style="text-decoration-style: dashed" class="tdl-underline">dojely</span>

      </td>   

      <td>

        <code>wavy</code><br>      

        <span style="text-decoration-style: wavy" class="tdl-underline">dojely</span>

      </td>          

    </tr>    

    <tr>

      <th>

        <code>text-decoration-color</code>

        <br><small class="f-sm">✓ Works in all browsers</small>                

      </th>

      <td>

        <code>currentColor</code><br>

        <span style="text-decoration-color: currentColor" class="tdl-underline">dojely</span>

      </td>

      <td>

        <code>blue</code><br>      

        <span style="text-decoration-color: blue" class="tdl-underline">dojely</span>

      </td>

      <td></td>

      <td></td>

      <td></td>

    </tr>    

    <tr>

      <th>

        <code>text-underline-position</code>

        <br><small class="f-sm">

          ✓ Works in Chrome, Firefox<br>        

          × Not working in Safari

        </small>          

      </th>

      <td>

        <code>auto</code><br>

        <span style="text-underline-position: auto" class="tdl-underline">dojely</span>

      </td>

      <td>

        <code>under</code><br>      

        <span style="text-underline-position: under" class="tdl-underline">dojely</span>

      </td>

      <td></td>

      <td></td>

      <td></td>      

    </tr>    

  </table>

  <h2 class="mt-5 mb-3">

    <code>text-decoration</code> 

    <small class="f-sm"><a href="https://www.w3.org/TR/css-text-decor-4/">(CSS Text Decoration Level 4)</a></small>

  </h2>

​

​

  <table class="table table-bordered">

    <colgroup>

      <col style="width: 28.56%">

      <col style="width: 14.28%">      

      <col style="width: 14.28%">

      <col style="width: 14.28%">      

      <col style="width: 14.28%">

      <col style="width: 14.28%">            

    </colgroup>

    <tr>

      <th>

        <code>text-decoration-width</code>   

        <br><small class="f-sm">

          × Not working in all browsers yet<br><br>

        </small>                        

      </th>

      <td>

        <code>auto</code><br>

        <span class="tdl-underline" style="text-decoration-width: auto">dojely</span>

      </td>

      <td>

        <code>0.25em</code><br>      

        <span class="tdl-underline" style="text-decoration-width: 0.25em">dojely</span>

      </td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

    <tr>

      <th>

        <code>text-decoration-thickness</code>   

        <br><small class="f-sm">

          ✓ Works in: Firefox, Safari<br>

          × Not working in Chrome

        </small>                        

      </th>

      <td>

        <code>auto</code><br>

        <span class="tdl-underline" style="text-decoration-thickness: auto">dojely</span>

      </td>

      <td>

        <code>0.25em</code><br>      

        <span class="tdl-underline" style="text-decoration-thickness: 0.25em">dojely</span>

      </td>

      <td></td>

      <td></td>

      <td></td>      

    </tr>    

    <tr>

      <th>

        <code>text-underline-offset</code>  

        <br><small class="f-sm">

          ✓ Works in: Firefox, Safari<br>

          × Not working in Chrome

        </small>  

      </th>

      <td>

        <code>auto</code><br>

        <span class="tdl-underline" style="text-underline-offset: auto">dojely</span>

      </td>

      <td>

        <code>0.5em</code><br>      

        <span class="tdl-underline" style="text-underline-offset: 0.5em">dojely</span>

      </td>

      <td></td>

      <td></td>

      <td></td>      

    </tr>   

    <tr>

      <th>

        <code>text-decoration-skip-ink</code>   

        <br><small class="f-sm">

          ✓ Works in all browsers<br><br>

        </small>          

      </th>

      <td>

        <code>auto</code><br>

        <span class="tdl-underline" style="text-decoration-skip-ink: auto">dojely</span>

      </td>

      <td>

        <code>0.5em</code><br>      

        <span class="tdl-underline" style="text-decoration-skip-ink: none">dojely</span>

      </td>

      <td></td>

      <td></td>

      <td></td>      

    </tr>       

  </table>  

​

</div>  

.tdl-underline {

  text-decoration-line: underline;

}

​

.f-sm {

  font-size: 0.7rem;

}

​

body {

  font-size: 1.2rem;

}

​

code {

  color: #8c4615;

}