边框长度小于div宽度？

Question

我有以下代码

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

div宽度为200px，因此border-bottom也是200px，但是如果我希望border-bottom-
bottom仅100px而又不更改div宽度，该怎么办？

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>

无需出于演示目的使用额外的标记。IE8也支持：after。

编辑：

如果你需要一个右对齐边框，只是改变left: 0与right: 0

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