CSS - Short border line?
Building on the answer by @SW4 you can also use a pseudo element and then you don't have to change the html:
HTML
<div id="Mid-Content_">
text text text text text text text text text text
</div>
CSS
#Mid-Content_ {
position: relative;
width: 250px;
padding-left: 10px;
}
#Mid-Content_:after {
content: "";
border-left: #CCC 2px solid;
position: absolute;
top: 10px;
bottom: 10px;
left: 0px;
}
No, borders will always extend the full length or width of the element (e.g. content + padding, but not margin). However you could always enclose the text inside the div
in a p
tag, which is semantically correct anyway, and add the border to that instead:
#Mid-Content_ p {
padding: 0;
border-left: 2px solid #CCC;
}
Also, the border on the div
should be inline with the text anyway (or it would be if you didn't set an explicit height on the div), presuming you have a normal-ish line-height
and there is no top or bottom padding on the div.
Have a look at this fiddle
HTML
<div id="contentArea">
<div id="border"></div>
text text text text text text text text text text
</div>
CSS
#contentArea {
height: 100px;
width: 80px;
position: relative;
background: #3beadc;
padding:5px;
}
#border {
border-left: 2px solid #f51c40;
position: absolute;
top: 10px;
bottom: 10px
left:0px;
}
If you want the border to be outside the contentArea, change its left value to negative*border width* e.g. left:-2px;
in the case above