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

Tags:

Css