DEV Community


Posted on

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;
Enter fullscreen mode Exit fullscreen mode

bye bye

instead we should use text-decoration~! with it we can change the thickness, color, style, and line.

screenshot of a styled a tag

a {
  color: hotpink;
  text-decoration-thickness: 8px;
  text-decoration-color: lime;
  text-decoration-style: wavy;
  text-decoration-skip-ink: all;
  text-decoration-line: underline; 
Enter fullscreen mode Exit fullscreen mode

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)

aarone4 profile image
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 profile image

today i learned!!

kaamkiya profile image

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 profile image

omg please share when you do!!