<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.