您可以使用伪元素。例如

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;