'Css to create a bottom border that does not extend the length of the entire div

I have a set of containers that have a bottom border that is styled like this:

<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>
<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>
<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>

with css styling (in addition to bootstrap) like this:

.my-styled-div {
    text-align: center;
    padding-bottom: 10px;
    border-right: 1px solid #848484;
    border-bottom: 1px solid #848484;
}

The thing I don't know how to do is prevent that bottom border from extending to the edge of the div. What can i use to have the bottom border start, for example, 25px in from the left side of each div?

Here is a fiddle link with a bit of a visual: https://jsfiddle.net/jfakey/mhwb49bu/1/

htmlcss


Solution 1:[1]

Instead of putting the bottom border on the div, put it in a pseudo element, which you can adjust the width relative to the div. Example below uses a background-color and height of 1px on the pseudo-element to act as the bottom border.

.my-styled-div {
        position: relative;
        text-align: center;
        padding-bottom: 10px;
        border-right: 1px solid #848484;
        width: 80px;
        height: 80px;
    }
    .my-styled-div::after {
        content: '';
        position: absolute;
        margin: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 1px;
        background-color: #000;
    }

updated fiddle https://jsfiddle.net/to7Lgx8d/

Solution 2:[2]

One way to do it would be to fake a border with an additional div (or you could use a pseudo selector, as @danieljkahn details below, if you don't want to alter your HTML). You could then use calc to set the width of the div to 100% - 25px and then float it right:

.border {
    width:calc(100% - 25px);
    height:1px;
    background:#848484;
    float:right;
}

Updated Fiddle

Solution 3:[3]

I think wrapping or styling another nested div is the only way to do this (unless you use a background image or a styled HR). This is because of the way CSS is designed to be used - aka the Box Model: https://css-tricks.com/the-css-box-model/

https://jsfiddle.net/mhwb49bu/12/

.my-styled-div {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #848484;
    margin-left: 25px;
    padding-left: 25px;
}
.row { 
    border-right: 1px solid silver;
    border-left: 1px solid silver;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 APAD1
Solution 3 user0474975

Related Questions