Jump to content

Underline Hover Effect


Recommended Posts



I've been trying to code my site so that when you hover over a button (i.e. "Photo Gallery") it will underline from left to right as a transition/animation.


Here is a link that shows almost exactly what I want to do ( the underline part)




As I said, I've been trying to make this work but haven't had any luck. I noticed the content: " "; is empty, so I'm not sure if that's what I'm missing, but I don't know what to put there.


Thanks in advance for your help!

Link to comment
Share on other sites

The "underline" is actually a box that's one pixel tall and as wide as the link. The code for it is right there on their website:

.underline {	overflow: hidden;	display: inline-block;	margin-bottom: -14px; /* Value depends on your design. Fix the awkward space from overflow:hidden. */}.underline:before {	content: "";	position: absolute;	left: -100%;	bottom: 0;	display: block;	width: 100%;	height: 1px;	background-color: black;}.underline:hover:before {	left: 0;}

You need to set the content to something in order to make the :before pseudo-element exist. Setting it to an empty string is good enough.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...