CSS边框波顿线填充

Question

I am trying to add left padding to a border bottom line for a div. How can I achieve this?

This is what i tried

When I add padding left then both text and border bottom line moves.

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

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

Answer 1

You could fudge it with some pseudo content.

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

This will work provided the height and bottom properties are the equivalent and inverse equivalent, respectively, of the border width.

Answer 2

You may use a background-image and background-size. DEMO (with linear gradient)

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

Or a 1 pixel image : DEMO

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

Note , a padding:bottom average fake border heifgt might be necessary