Animate the Length of the Border-Bottom With Pure CSS
This is a follow up to our blog post “Shorten the Length of the Border-Bottom With Pure CSS“. In that post I detailed a way to add a border to the bottom of any element that is not the full width of that element using nothing but css. In this post I am going to show you how to animate that border! Sticking with the theme of “Pure CSS” I am going to show you how to perform an animation on Mouse Hover.
Skip to the Code
Why would I want to do this?
Adding a subtle animation can really encourage people to stay on your pages and posts longer. In a sense it can turn your website into a little game. It can also just add a little professionalism and intentionality. It can turn an average looking header or element into an interactive design feature.
Can I really add animations with pure css?
Yes. I understand the skepticism. Usually you need to enlist the use of jQuery or some type of Java in order to perform animations on your site. The way I will be sticking to pure css is by adding our animation on hover. It is amazing the way you can creatively use the :hover selector to perform really complex animations. With the release of CSS3 the possibilities for animation within CSS have greatly expanded through the use of @keyframes. I will be writing more blogs about some of these animations in the future. Stay tuned. Today we are going to keep it simple with the :hover selector.
In our example today we are going to change the width of the border on hover learn to adjust the speed of this animation. However, you could change any number or combination of things like the color, opacity, thickness or position using this same method.
What would that look like?
Here is an example of what it could look like:
Let’s say you are trying to add a border-bottom to an element with the class of “page-title“, and you would like the border to expand to full width when you hover over the element. Your code would look like this.
.page-title:after {
content: ""; /* This is necessary for the pseudo element to work. */
display: block; /* This will put the pseudo element on its own line. */
width: 5%; /* Change this to whatever width you want to have before hover. */
padding-top: 20px; /* This creates some space between the element and the border. */
border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
transition: .5s; /* This establishes the amount of time in seconds the animation should take from start to finish */
}
.page-title:hover:after {
width: 15%; /* This will be the new width of your border when on hover */
}
That is all there is to it! I hope this helps. Have fun messing around with the beauty of animations!
Please leave comments with any questions or concerns. We love hearing about how you have implemented this code.
If you ever need any assistance with CSS, HTML, PHP, jQuery or WordPress just contact us. Serving people with integrity and finding elegant solutions to problems is what we do.
Contact Us
