nav1Transitions to me are very important. Even a very slight ease of .2s can make a difference for the user. The sad part about CSS3 is the inability to animate the underline in text. However, there is a work around: create a block that looks like an underline.

Using the :after pseudo and setting the an empty content attribute to the selector will create a fake block under the text. It will however not be visible yet, so we’ll have to force it out by using position: absolute. Next, fix the location to the bottom left at 0% and set the height and width.

Click here to view on CodePen


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About Stjepan Erdeljac

Junior web developer starting a web blog on my progress in web design and showing some techniques and ideas for myself and other that may find useful.

Latest Posts By Stjepan Erdeljac

Category

Navigation

Tags

, , ,