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

Question

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

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

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

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

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>

fiddle :

http://jsfiddle.net/vL1qojj8/