this blog post is more like a little snack.
after watching Kevin Powell's styling underlined links video... i knew i had to try it out for myself!!
fancy a tags
turns out we do not need any of that pseudo class schtuff anymore!
a {
text-decoration: none;
position: relative;
}
a::after {
content: '';
position: absolute;
width: 100%;
bottom: -5px;
left: 0;
height: 3px;
background: lime;
}
instead we should use text-decoration~! with it we can change the thickness, color, style, and line.
a {
color: hotpink;
text-decoration-thickness: 8px;
text-decoration-color: lime;
text-decoration-style: wavy;
text-decoration-skip-ink: all;
text-decoration-line: underline;
}
but that is so much typing, right??
good news!! you can shrink it down to one line <333 text-decoration: 8px lime solid underline;
here is a codepen where i do a couple smol animations to change the link stylings.
ope! forgot about one more thing! in order to change the position of the underline, you will have to use a non decoration style called text-underline-offset.
now is your time to get fancy with your links.
Top comments (4)
Did you know that one of the few pseudo properties you can't style is a:visited because this would be a security risk as it exposes your browsing history.
today i learned!!
Cool! I had no idea links could be completely changed with just a few lines. I'll be sure to do this in my website :)
omg please share when you do!!