Links with a different color underline are cool. I couldn't tell you why I like them. I just do.
Here is how I normally style my links for projects:
<p class="style-1">
Here is a paragraph with <a>some great hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>
<p class="style-2">
Here is yet another paragraph with <a>some great links without hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>/* The link styles */
.style-1 a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: #FF0000;
text-underline-position: under;
}
.style-2 a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: #FF0000;
}
/* Extra styles for the demo */
p {
font-family: sans-serif;
font-size: 1.1rem;
line-height: 1.5;
}
a {
cursor: pointer;
}
a:hover {
color: #FF0000;
}falseResult
Though whether to use text-underline-position: under; is always up for debate.