html - 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 的左侧开始？

这是一个带有一些视觉效果的 fiddle 链接: 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;
    }

更新 fiddle https://jsfiddle.net/to7Lgx8d/