边框长度小于 div 宽度？

Question

我有以下代码

 div {
   width: 200px;
   border-bottom: 1px solid magenta;
   height: 50px;
}

 <div></div>

div 宽度是 200 像素，所以边框底部也是 200 像素，但是如果我想要边框底部只有 100 像素而不改变 div 宽度，我该怎么办？

原文由 Ali Nouman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用伪元素。例如

 div {
  width   : 200px;
  height  : 50px;
  position: relative;
  z-index : 1;
  background: #eee;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

 <div>Item 1</div>
<div>Item 2</div>

无需为演示目的使用额外的标记。 :after 也受 IE8 支持。

编辑：

如果您需要右对齐边框，只需将 left: 0 更改为 right: 0

如果您需要居中对齐的边框，只需设置 left: 50px;

原文由 Fabrizio Calderan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一种方法（在现代浏览器中）是使用负扩散框阴影。查看这个更新的小提琴：http: //jsfiddle.net/WuZat/290/

 box-shadow: 0px 24px 3px -24px magenta;

不过，我认为最安全和最兼容的方法是上面接受的答案。只是想我会分享另一种技术。

原文由 m1. 发布，翻译遵循 CC BY-SA 3.0 许可协议