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

HTML/CSS - Troubleshooting Animation Issues

I am currently experimenting with different website animations and implementing responsive design. However, I encountered an issue when trying to apply these changes to my header, which also affects the .heading element. It seems that there is a problem w ...

htmlcssresponsive-designcss-animationsresponsive

Vue.js mobile app may show a loaded DOM that remains invisible until the screen is tapped

I am facing a peculiar issue that has me stumped. On my mobile device, my page initially loads like this homepage However, once I tap the screen, all the components suddenly appear. Is there a way to simulate a click on my mobile? I'm struggling to u ...

javascripthtmlvue.js

Using the jQuery POST method to execute a redirect upon successful completion

I am attempting to utilize jQuery to create a post method. I have implemented it within a form and used bootstravalidator for validation. Once the form is successfully validated, it is posted and the PHP code comes into action. Now, my goal is to redirect ...

phpjqueryhtmlformsbootstrapvalidator

Designing Tables for User Interfaces

In a table with 4 rows, the first row must always be filled by the user. The remaining rows are optional. What is the best way to visually indicate this requirement? This should be achieved using only HTML, CSS, and jQuery. ...

htmlcssrow

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

htmlcssfirefoxbackground-position

Negative margin causes content to conceal itself

I'm facing an issue with using a negative margin for positioning a label. The label is not showing up as expected. Specifically, I need to place a search box on a blue background but when applying a negative margin, the search box does not appear prop ...

css

Illuminated Box with Text Beneath Image Overlay

Is there a way to customize the text displayed under each zoomed-in image even further, using images, etc. instead of just relying on the alt text? An ideal solution would involve displaying the text in a div. You can find the codepen here: // Looking ...

javascriptjqueryhtmllightbox

Can you explain the contrast between open and closed shadow DOM encapsulation modes?

My goal is to create a shadow DOM for an element in order to display elements for a Chrome extension without being affected by the page's styles. After discovering that Element.createShadowRoot was deprecated, I turned to Element.attachShadow. Howeve ...

javascripthtmldomshadow-dom

Iframe Interactivity

My goal is to create an interactive iframe that will match the current parent URL (). For example, if I have an iframe pointing to http://www.google.com and click a link within the iframe, it should update the parent URL to , and then load the clicked con ...

javascriptjqueryhtmliframe

css - targeting the last child element using a type selector

I'm attempting to target the final child element of type <div> within the container "#myDiv" <div id="myDiv"> <div> <img> <div> <div>text</div> ...

htmlcsscss-selectors

What is the right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

htmlcssheightwidth

Add Text to Bootstrap Modal Window

The bootstrap modal body is not containing all of my content and some of it is overflowing. <div class="modal fade" tabindex="-1" role="dialog" id= "blockModel"> <div class="modal-dialog"> <div class="modal-content"> < ...

jqueryhtmlcssbootstrap-modal

What is the process for adjusting the color of the browser tab?

My chat application is running smoothly, but a client has requested the ability to highlight or make the browser tab blink when they receive a visitor call. This will help them respond promptly to incoming inquiries. Does anyone know how to implement thi ...

jqueryhtmlcss

Angular 7/8 now allows for empty strings in Template Driven Forms

I've encountered a problem with my form validation that allows empty strings. The required attribute works, but it still allows the user to input spaces. I came across a solution online which involves using ng-pattern with the pattern pattern=".*[^ ]. ...

htmlangularvalidationtemplates

Highlight the menu item when you reach a specific section

I am facing difficulties in creating a scrolling menu that highlights the respective item when a specific section is reached. As a beginner in design, I am struggling to achieve this effect. Any insights or guidance on how to implement this would be grea ...

jqueryhtmlcss

What is the best way to create a button that can cycle through various divs?

Suppose I want to create a scroll button that can navigate through multiple div elements. Here is an example code snippet: <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div ...

javascriptjqueryhtmlcss

Issue with flexbox max-width property not being applied when resizing the page width

I'm struggling to make a flex box with max and min width properties work properly. When I reduce the page size, it ends up showing blank space instead of resizing. How can I troubleshoot this issue? .parent{ border: 1px solid red; width: 50%; ...

htmlcssflexbox

Ensure consistency in the heights of div elements, even when the images contained within have varying heights

I created a bootstrap webpage with a row of DIVs, each containing an image. As I resize the browser window, I noticed that the height of the first two DIVs remains consistent, but the third div's height varies because the image is only 50 pixels high. ...

htmlcss

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

javascriptjquerycss