是否可以在x像素量之后开始边框底部？ [英] Is it possible to start the border-bottom after x amount of pixels?

问题描述

有这样的选择，否则我必须重叠 border-bottom 与另一个div ..

It would be cool if there was such an option, else I'd have to overlap the border-bottom with another div..

推荐答案

您可以使用伪元素。

HTML ：

<div></div>

CSS ：

div {
    position: relative;
    margin: 7em auto 1em;
    width: 10em; height: 5em;
    background: dimgrey;
}
div:after {
    position: absolute;
    bottom: -.8em;
    width: 100%;
    border-bottom: solid 1px;
    content: '';
}

或者您可以使用 background-clip：content-框，您不需要使用伪元素。但是你的文本会粘在背景的边缘（除非它是一个小文本和居中）。

Or you could use background-clip: content-box and you won't need to use a pseudo-element. But then your text will stick to the edges of the background (unless it's a small text and centred).

相关 CSS ：

div {
    margin: 7em auto 1em;
    padding: 0 0 .8em;
    border-bottom: solid 1px;
    width: 10em; height: 5em;
    background: dimgrey;
    background-clip: content-box;
}

这篇关于是否可以在x像素量之后开始边框底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！