css breakfast #3

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.

Comments

[Kaamkiya]

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 :)

[kachel]

omg please share when you do!!

[Aaron Reese]

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.

[kachel]

today i learned!!