CSS - 短边框线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19980659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Short border line?
提问by user2987337
I have a border on a couple of DIVs that is only on the left side.
我在仅在左侧的几个 DIV 上有一个边框。
CSS:
CSS：
#Mid-Content_ {
position: absolute;
left: 510px;
top: 119px;
height: 70%;
border-left: #CCC 2px solid;
width: 250px;
padding-left: 10px;
}
The border goes from the top to the bottom of the left side which is exactly what it should do according to the CSS code.
边框从左侧的顶部到底部，这正是根据 CSS 代码应该做的。
Is there a way to make it shorter, say 10px from the top and bottom? The problem is that the text inside the DIV needs to be inline with this border line.
有没有办法让它更短，从顶部和底部说 10px？问题是DIV里面的文字需要与这条边界线内联。
回答by SW4
Have a look at this fiddle
看看这个小提琴
HTML
HTML
<div id="contentArea">
<div id="border"></div>
text text text text text text text text text text
</div>
CSS
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
如果您希望边框位于 contentArea 之外，请将其左值更改为负*border width*，例如left:-2px;在上述情况下
回答by Ennui
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 divin a ptag, which is semantically correct anyway, and add the border to that instead:
不，边框将始终扩展元素的全长或全宽（例如内容 + 填充，但不是边距）。但是，您始终可以将文本包含在divinp标签中，无论如何，这在语义上是正确的，然后添加边框：
#Mid-Content_ p {
padding: 0;
border-left: 2px solid #CCC;
}
Also, the border on the divshould 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-heightand there is no top or bottom padding on the div.
此外，div无论如何， 上的边框应该与文本内联（或者如果您没有在 div 上设置明确的高度，则假设您有一个普通的 ishline-height并且 div 上没有顶部或底部填充.
回答by Nat
Building on the answer by @SW4 you can also use a pseudo element and then you don't have to change the html:
基于@SW4 的答案，您还可以使用伪元素，然后您不必更改 html：
HTML
HTML
<div id="contentArea">
text text text text text text text text text text
</div>
CSS
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;
}
