CSS创建一个不延伸整个div长度的底部边框

Question

我有一组容器，其底部边框的样式如下：

<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>

使用 css 样式（除了 bootstrap 之外），如下所示：

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

我不知道该怎么做是防止底部边框延伸到 div 的边缘。我可以使用什么来让底部边框开始，例如25px从每个 div 的左侧开始？

这是一个带有一点视觉效果的小提琴链接： https://jsfiddle.net/jfakey/mhwb49bu/1/

Answer 1

不要将底部边框放在 div 上，而是将其放在伪元素中，您可以调整相对于 div 的宽度。下面的示例在伪元素上使用背景颜色和 1px 高度作为底部边框。

.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;
    }

更新了小提琴https://jsfiddle.net/to7Lgx8d/

Answer 2

我不认为你可以设计 div 的一部分，但是你当然可以使用

完成工作

 body {
    margin: 100px;
}
    .my-styled-div {
        text-align: center;
        /*padding-bottom: 10px;  remove this*/
        border-right: 1px solid #848484;
        /*border-bottom: 1px solid #848484;  also remove this */
    }

.hr-fix{
    margin-bottom: 0;
    margin-top: 10px;
    margin-left: 25px;/*  << you can specify how far from the left you want the line to be */
    border: 0;
    border-bottom: 1px solid #848484; /* you may match this border with the right border of the <div>*/
    
}

<div class="row col-md-4">
        <div class="my-styled-div">
            div1
            <hr class="hr-fix" />
        </div>
    </div>
    <div class="row col-md-4">
        <div class="my-styled-div">
            div2
             <hr class="hr-fix" />
        </div>
    </div>
    <div class="row col-md-4">
        <div class="my-styled-div">
            div3
            <hr class="hr-fix" />
        </div>
    </div>