text underline

the text-decoration shorthand css property sets the appearance of decorative lines on text. it is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.

1

text-decoration-color: rgb(var(--pink-300) / 50%);
text-decoration-line: underline;

2

border-bottom: 1px solid rgb(var(--pink-300) / 50%);
text-decoration: none;

3

text-decoration-color: rgb(var(--pink-300) / 50%);
text-decoration-line: underline;
text-decoration-thickness: 0.05em;
text-underline-offset: 0.25em;

4

background-image: linear-gradient(transparent 95%, rgb(var(--pink-300) / 50%) 0);
text-decoration: none;

5

box-shadow: 0 1px 0 0 rgb(var(--pink-300) / 50%);
text-decoration: none;

browser support