colinh_7 Posted March 9, 2015 Share Posted March 9, 2015 Hello, 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) http://radiatingstar.com/unorthodox-ideas-for-ahover-effects 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 More sharing options...
Ingolme Posted March 10, 2015 Share Posted March 10, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now