Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 1273

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 1310

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 1314

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 1342

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 3464

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 3471

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 3484

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/gravityforms/common.php on line 3972
Animated Underlines with CSS | Pixie Nerd Theme
Go to the top

Animated Underlines with CSS


Notice: Trying to access array offset on value of type null in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/codepen-embedded-pen-shortcode/codepen.php on line 15

Notice: Trying to access array offset on value of type null in /home/dh_432dct/themedev.thepixelpixie/wp-c0nt3nt/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

I was recently working on a new theme for my website when I decided to explore different possibilities for menu link animations. There are so many great possibilities thanks to CSS animations/transitions.

Creating these effects is very simple since no additional DOM elements have to be added to your HTML markup. And in most cases, for browsers that don’t yet support pseudo elements, they fall back nicely to just a simple underline.

Just note that indeed, not all browsers will support these pseudo elements, as stated above. So do your due diligence with browser testing.

These are just a small sample of what can be done. I’d love to see how you’ve used CSS and pseudo classes to dress up your pages.

See the Pen Animated underlines by Laura Sage (@ThePixelPixie) on CodePen.0