控制边界长度

Question

我想限制应用于div元素（或任何HTML元素）的边框长度。例如，考虑宽度为100px 的div，无论如何将边框应用于仅40px 宽度本身？

Answer 1

您需要使用适当宽度的子div才能执行此操作。例如：

<div id="outer">
  <div id="border"></div>
  <p>...</p>
</div>

使用：

#outer { width: 100px; padding-top: 0; }
#border { width: 40px; border-top: 1px solid black; margin-top: 0; }

Answer 2

您需要使用嵌套div或窄图像作为背景。

尽量不要添加div来显示边框，总是尝试语义。可能你的设计需要补充部分。

Answer 3

您可以简单地使用伪选择器<div>和:before来代替添加其他:after：

div {
    position: relative;
}
div:before {
    position: absolute;
    content:'';
    height: 1px;
    width: 40%;
    background-color: black;
}

这是fiddle。