Shorten the Length of the Border-Bottom With Pure CSS

Css-Border-Bottom-Featured

If you are like me you have ran into this issue many times. You want to add a border to the bottom of an element but you don’t want it to be under 100% of the element. You just want it to be under a bit of it. My first thought was maybe CSS would let you establish a width for border-bottom… No such luck. You can go in to the HTML and add another element below the element you want to have the border-bottom and give it a background that is the color you want the border to be and then set the width and height, which is what I have done for years.

Skip straight to the code.

This always left me asking a question…
Can this be done in css?

Which led me to the answer…
Not really.

There isn’t a way to declare the length of a border, but I found a pretty slick work around using nothing but CSS.

Instead of adding a border to the element you are trying to effect add a pseudo element of :after and give it a border-bottom and set the width. Done.

What would that look like?
Here is an example of what it could look like:

Example

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“. 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. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    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. */
}

If you have enjoyed this post please checkout “Part 2” where I explain how to add some animation with pure css.

That is all there is to it! I hope this helps.

Please leave comments with any questions or concerns. We love hearing from this community of creative individuals.

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

Part 2

Check out some of our other helpful web design posts!

Change Active Menu as you Scroll with JQuery

How to Fix a Cookies Blocked Error on WordPress Admin Dashboard

How to Reduce the Size of your Webpage

How to Install a Plugin in WordPress