Border bottom animation css

border-bottom

The border-bottom shorthand CSS property sets an element’s bottom border. It sets the values of border-bottom-width , border-bottom-style and border-bottom-color .

Try it

As with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

border-bottom-style: dotted; border-bottom: thick green; 

It is actually the same as this one:

border-bottom-style: dotted; border-bottom: none thick green; 

The value of border-bottom-style given before border-bottom is ignored. Since the default value of border-bottom-style is none , not specifying the border-style part results in no border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; /* Global values */ border-bottom: inherit; border-bottom: initial; border-bottom: revert; border-bottom: revert-layer; border-bottom: unset; 

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

Formal definition

• border-bottom-width : medium
• border-bottom-style : none
• border-bottom-color : currentcolor

• border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
• border-bottom-style : as specified
• border-bottom-color : computed color

• border-bottom-color : a color
• border-bottom-style : discrete
• border-bottom-width : a length

Formal syntax

border-bottom =
||
||

=
|
thin |
medium |
thick

=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

Examples

Applying a bottom border

HTML

div>This box has a border on the bottom side.div> 

CSS

div  border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; > 

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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.

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:

How exactly does that work?

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.

Steck Insights

Steck Insights Web Design seeks to provide professional, custom WordPress website solutions, quickly, efficiently and cost-effectively. You can count on us to follow web standards for safety, coding, SEO and speed.

Источник

How to Animate the Bottom Border on Hover using CSS?

To animate the bottom border of an element on hover, we can use the ::after pseudo-element selector in combination with the transition property.

The ::after pseudo-element selector is used to add additional content after the original content of an element. In our example, we will use it to add a border at the bottom of the element.

Now, we want to animate the bottom border of the element whenever we hover over it. To achieve this we will use the transition property.

To get the preview, hover over the below links:

Let’s say we have the following links in our HTML file with a class animated :

Now, we want to animate the bottom border of these links whenever we hover over them.

To achieve that we have to add the following CSS code:

Example:

.animated < text-decoration: none; display: inline-block; >.animated::after < content: ''; display: block; width: 0; /* Hide border initially */ height: 2px; background: red; transition: width 0.3s ease; >.animated:hover::after< width: 100%; /* Show border on hover */ >

Method 2 – Using transform Property

You can also use the transform property to animate the bottom border of an element.

In this approach, we scale the bottom border from 0 to 100% whenever we hover over the element using the scaleX() function of the transform property.

The main advantage of this method is that you can specify the direction of animation using the transform-origin property. That is, if you set the transform-origin to left , the border will animate from left to right.

Similarly, if you set the transform-origin to right , the border will animate from right to left.

Let’s first animate the bottom border from left to right just like we did it in the above example:

Example:

.animated < text-decoration: none; display: inline-block; >.animated::after < content: ''; display: block; transform: scaleX(0); border-bottom: 2px solid red; background: red; transition: transform 0.3s ease; transform-origin: left; /* Animate from left to right */ >.animated:hover::after

If you want to animate the bottom border from right to left, you have to just set the transform-origin to right .

Hover over the below links to get a preview:

Here is the CSS code you need:

Example:

.animated < text-decoration: none; display: inline-block; >.animated::after < content: ''; display: block; transform: scaleX(0); border-bottom: 2px solid red; background: red; transition: transform 0.3s ease; transform-origin: right; /* Animate from right to left */ >.animated:hover::after

You can also start animating the border from the center by just setting the transform-origin property to center.

Related posts:

Источник

Animate CSS border-bottom property

To implement animation on the border-bottom property with CSS, you can try to run the following code:

Example

      
Performing Animation for bottom border
  

• Related Articles
• Animate bottom CSS property
• Animate CSS border property
• Animate CSS margin-bottom property
• Animate CSS padding-bottom property
• Animate CSS border-top property
• Animate CSS border-spacing property
• Animate border-color property with CSS
• Animate border-left property with CSS
• Animate CSS border-left-color property
• Animate CSS border-left-width property
• Animate border-top-width CSS property
• Animate CSS border-top-color property
• Animate CSS border-top-left-radius property
• CSS border-bottom-right-radius property
• CSS border-bottom-left-radius property

Annual Membership

Enjoy unlimited access on 5500+ Hand Picked Quality Video Courses

Training for a Team

Affordable solution to train a team and make them project ready.

• About us
• Refund Policy
• Terms of use
• Privacy Policy
• FAQ’s
• Contact

Copyright © Tutorials Point (India) Private Limited. All Rights Reserved.

We make use of First and third party cookies to improve our user experience. By using this website, you agree with our Cookies Policy. Agree Learn more

Источник