CSS - 只有一半边框可见的边框

Question

我很困惑，因为必须让它在 CSS 中工作，只有一个 div，其中边框只能在其宽度的一半上可见。

边框样式很简单 1px solid #000;

但是，我希望 div 的边框的顶部在任何地方都不可见（在 div 的宽度上为 100%），而仅在前 50% div 的宽度。

我在任何地方都找不到这方面的例子，它需要以百分比表示，所以通常的技巧包（下半场的图像，…）。

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

Answer 1

如果你根本不想弄乱 HTML，你可以用一个空的伪元素来做，只使用 CSS。当然，您仍然需要知道背景颜色（这里假设为白色）：

 <span class="half-a-border-on-top">Hello world!</span>

<style>
.half-a-border-on-top {
  border-top:1px solid black;
  position: relative;
}
.half-a-border-on-top:after {
  padding:0;margin:0;display:block;/* probably not really needed? */
  content: "";
  width:50%;
  height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
  background-color:white;
  position: absolute;
  right:0;
  top:-1px;
}
</style>

结果：

片段

     .half-a-border-on-top {
      border-top:1px solid black;
      position: relative;
    }
    .half-a-border-on-top:after {
      padding:0;margin:0;display:block;/* probably not really needed? */
      content: "";
      width:50%;
      height:1.1px;
      background-color:white;
      position: absolute;
      right:0;
      top:-1px;
    }

     <span class="half-a-border-on-top">Hello world!</span>

小提琴：

http://jsfiddle.net/vL1qojj8/

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