<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;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.