html - 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 属性分别与边框宽度等效和相反，则此方法将起作用。