CSS - 短边界线？

Question

我在几个DIV上只有左边的边框.

CSS:

#Mid-Content_ {

    position: absolute;
    left: 510px;
    top: 119px;
    height: 70%;
    border-left: #CCC 2px solid;
    width: 250px;
    padding-left: 10px;
}

边框从左侧的顶部到底部,这正是它根据CSS代码应该做的事情.

有没有办法让它更短,比如从顶部和底部10px？问题是DIV内的文本需要与此边界线内联.

Answer 1

看看这个小提琴

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

如果您希望边框位于contentArea之外,请将其左侧值更改为负*边框宽度*,例如left:-2px;在上面的情况中

Answer 2

基于@SW4的答案，您还可以使用伪元素，然后不必更改 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;
  }