<h2>
  text-decoration with shorthand (does not work in IE, Safari)
</h2>

<p class="shorthand">
  Lorem, ipsum… <a href="#">Corporis quidem</a> labore assumenda expedita.
</p>
  
<h2>
  text-decoration with individual props (does not work in IE)
</h2>

<p class="individuals">
  Lorem, ipsum… <a href="#">Corporis quidem</a> labore assumenda expedita.
</p>  
  
.shorthand a {
  color: inherit;
  text-decoration: dotted green underline;
}

.individuals a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: green;
}

/* Etc: */

body {
  font-size: 2em;
  font-family: Roboto, Helvetica, sans-serif;
  margin: 2em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.