Ways to reduce the size of the border on the bottom in HTML/CSS

Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippet of the code:

.divborder {
  border-bottom: 6px solid #C6C4C5;
  /*what should i put here to shorten this border-bottom?*/
}
<div class="container divborder">
  <div class="col-md-6">
    some img
  </div>
  <div class="col-md-6">
    some texts
  </div>
</div>

htmlcss

Answer №1

Changing the border's actual length is not possible.

To achieve this effect, you will need to utilize a positioned pseudo-element.

div {
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  margin: 1em auto;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  height: 10px;
  background: red;
  top: 100%;
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
}
<div></div>

Answer №2

If you want to adjust the length of the bottom border, check out this informative blog post that explains it perfectly: 

 .page-title:after {
    content: ""; /* Make sure to include this for the pseudo element to function properly. */ 
    display: block; /* This will position the pseudo element on a separate line. */
    margin: 0 auto; /* Center the border horizontally. */
    width: 50%; /* Adjust this value to customize the width of the border. */
    padding-top: 20px; /* Create space between the element and the border. */
    border-bottom: 1px solid black; /* Define the style of the border. You can change 'black' to any color you prefer. */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

Apache Server Efficiently Retrieves .php Files from Subfolders

After tirelessly searching the vast expanse of the internet for a solution to my dilemma and trying every method I stumbled upon, I am still facing the same issue. The problem arises when I attempt to access a .php file in a subdirectory from another file ...

phphtmlapache

Adjust the size and color of text in Chart.js using Angular 5

Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...

cssangulartypescriptchart.js

Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

I am encountering an issue while attempting to adjust the width and height of a rectangle using jQuery. The error message I receive is "Uncaught TypeError: Cannot read property 'scrollWidth' of null" Below you can find the code snippet in questi ...

javascriptjqueryhtmlcsssvg

The Bootstrap navbar branding element vanishes upon navigating away from the home page

I have recently started learning Python, Django, and Bootstrap. I am facing an issue where the navbar-brand disappears when navigating to a different page or view other than the index. In my case, the nav-brand is an image source. Below is the code snippet ...

htmldjangodjango-templatesnavbootstrap-5

PHP pattern substitution [ replace ]

Seeking assistance with two cases involving regular expressions in HTML code editing [parsing]. I currently use a parser with the following logic (example provided below with YouTube). Select the unique fragment (ED96RtfF22E) from the source HTML code of ...

phphtmlregexreplace

What is the best way to alter the text color based on certain conditions within a table column using PHP

I am faced with multiple conditions involving if-else statements, where the variable "Remark" changes based on these conditions. if($income==($paid + $deduction)){ $remark="Paid"; } else if($paid > 0){ $remark="Have Due"; } else{ $remark="N ...

phphtml

Extracting <p> elements from a separate HTML file and cycling through them

I successfully created a website using only HTML, JavaScript, and jQuery without any server-side scripting or language. Within my website, I have a simple stream.html page that remains unstyled with no CSS formatting. <html> <head> </head& ...

javascriptjqueryhtml

Ways to divide background color in half using CSS

Looking for some help with CSS - I want to split an HTML page into two sections, with a background and text/login form on top. Can anyone provide sample CSS and HTML code? This is what I've tried so far in CSS: .logindiv { height: 200px; width: ...

htmlcssbackground

Typography Addition on Flexslider

I am currently working with flexslider and trying to incorporate a unique text overlay on each individual slide, but so far I have been unsuccessful. <div class="flexslider"> <ul class="slides"> <li> <img src ...

javascripthtmlflexslider

Scaling Vuetify icons dimensions

During the development of an app using Vuetify, I encountered challenges in changing the default colors set by Vuetify. After some trial and error, I came across a solution on: https://github.com/vuetifyjs/vuetify/issues/299 The solution involved adding ...

cssvue.jsvuejs2stylusvuetify.js

What causes CSS to fail to load in React but work normally in Next.js?

We are currently experiencing an issue with a component located in a Git Submodule that is being used by both Next.js and React. While everything is functioning correctly in Next.js, React is unable to accept the way the CSS is being loaded: import styles ...

javascriptcssreactjs

Is it feasible to embed an entire linked CSS file within Jade?

I keep getting recommendations from Google's PageSpeed Insights to avoid using links for CSS files and instead include the styles directly under a style tag. I'm wondering if there is a way in Jade to specify a CSS file and have its contents pull ...

htmlpug

Using GSAP to merge texts from left to right

I'm curious about the animation technique used by the developer to make his name come together from right to left. I'd love to try implementing it myself to improve my CSS skills. It looks like GSAP ScrollTrigger was involved in this animation, ...

cssanimationgsap

Guiding you to choose a specific child class by identifying its parent class in CSS and jQuery

Hey there! I'm currently working on a website that allows users to post content. I want to ensure that the site is mobile-friendly, so I need to make some adjustments with media queries. Unfortunately, I've run into an issue where media query CS ...

jquerycssclassmedia-queriesparent

Bug with the button and text input feature in Firefox

I am facing a strange issue where the button and input have the same CSS (except for the background), but Firefox is displaying them differently. This problem does not occur in IE or Chrome. #searchInput { width: 80%; margin: 0 auto; display: ...

htmlcssfirefoxbuttoninput

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

jqueryhtml

Customizing label printing using HTML and CSS. Learn how to dynamically adjust label and container sizes based on label dimensions

After spending some time developing the code for a label size of 5cm by 2.2cm, I have successfully printed it without any issues. Now, my goal is to create a flexible solution that automatically adjusts font sizes and containers for various label sizes. T ...

htmlcssprintinglabelautosizing

Alignment issue with reCAPTCHA box detected

Why can't I seem to align the reCAPTCHA form properly on my registration page? Even though the div it is within has its text-align property set to center, the form still displays on the left side of the page: However, when I use JavaScript to chang ...

htmlcssrecaptcha

Ways to Retrieve JavaScript Variable inside HTML Tags in a JSP

I am currently facing a requirement where I must assign js variables to html input tag ids. For example: <input type='text' id='(here I need js variable)'/> I am aware that one way to achieve this is by creating the entire elem ...

javascripthtmljsp