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.
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.
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.
Have you made fatal mistakes with your website? Fill in the form below to receive a comprehensive guide outlining the top 10 common website mistakes that you must avoid.
Branding InquiryFill out the form below if you're interested!
colorado, web design, design, advertising, brand, graphic design, denver, marketing, united states, web developer, content management system, search engine optimization, software engineering, email marketing, content marketing, wordpress, search engine, user experience, digital marketing, software, lead generation, experience, brand awareness, web development, website design, website development, colorado springs seo, development, digital marketing agency, custom web design, technology, target audience, domain name, mobile device, customer, usability, website, analytics, landing page, user experience design, internet, colorado springs web design, google analytics, conversion rate optimization, email address, marketing strategy, logo, management, hubspot, link building, reputation, online presence, business website, wordpress web design, web designers, wordpress website, web design agency, wordpress experts, affordable web design, web design services, web design seo, design services, web design company, web design web, small business marketing, web design colorado, keyword research, credibility, research, search engine marketing, javascript, responsive web design, user interface, customer service, competitor analysis, social media, html, attention, css, accessibility, organization, knowledge, content management, competitive advantage, navigation, strategy, google search, social media marketing
web development colorado springs, web design colorado springs, colorado springs web design, colorado springs website design, colorado springs web designers, website design colorado springs
Common Website Mistakes
When it comes to building a successful online presence, avoiding common website mistakes is crucial. Some of the most common mistakes include having a slow loading website, using outdated design elements, not optimizing for mobile devices, and neglecting search engine optimization (SEO). By addressing these issues and making necessary improvements, you can create a more user-friendly and effective website for your business.
Another common mistake is neglecting to regularly update and maintain your website. This can lead to security vulnerabilities, broken links, and outdated content that can turn away potential customers. By investing in a website maintenance plan, you can ensure that your website remains up-to-date, secure, and optimized for performance.
