CSS边框底线填充

Question

我正在尝试将左边距添加到div的边框底线。我怎样才能做到这一点？

This is what i tried

当我添加填充时，文本和边框底线都会移动。

<div class='ot'>
Black border bottom should start from 30px left    <div>

.ot{
   width:100%;
   background-color:yellow;
    border-bottom: solid;       
}

Answer 1

你可以用一些伪内容来捏造它。

http://jsfiddle.net/E7fFL/3/

div {
   width:100%;
   background-color:yellow;
   border-bottom: solid 2px;
   position: relative;
}
div:after {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30px;
    height: 2px;
    content: '.';
    background: yellow;
    text-indent: -999px;
}

如果height和bottom属性分别是边框宽度的等效和反向等效，这将有效。

Answer 2

您可以使用背景图片和背景尺寸。的 DEMO (with linear gradient)

.ot {
    width:100%;
    background:yellow linear-gradient(to top, black, black) no-repeat 30px bottom;
    background-size: 100% 3px;
}

或1像素图片： DEMO

.ot {
    width:100%;
    background:yellow url(http://dummyimage.com/1x1) no-repeat 30px bottom;
    background-size: 100% 3px;
}

注意，填充：底部平均假边框heifgt可能是必要的