<p class="text-lg">Here's a <a class="cool-link" href="#0">cool link</a>.</p>

/* 💡 CSS Nugget: Новые свойства оформления текста */
/* 🔗 https://s-sd.ru/blog_studio_design/novye-svojstva-oformleniya-teksta/ */


body {
  padding: 2em;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
p {
  font-size: 2.5rem;
  font-family: Arial;
}
.cool-link {
  color: indigo;
  text-decoration-color: rgba(74, 0, 128, 0.3);
  transition: 0.3s;
}
.cool-link:hover {
  text-decoration-color: #4a0080;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.