I am trying to add left padding to a border bottom line for a div. How can I achieve this?
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;
}
You could fudge it with some pseudo content.
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.