CSS 在 div 之后添加一行

Question

我这里有这个 div

 <div class="example"></div>

这是CSS

 .example
{
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
}

我想要做的是在这个框之后添加一条线，它触及中间框的右侧，我将如何做到这一点？

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

Answer 1

你需要使用 ::after 伪元素

 .example {
  border: 5px solid #000;
  height: 200px;
  width: 400px;
  position: relative;
  box-sizing: border-box;
}
.example::after {
  content: " ";
  display: block;
  position: absolute;
  height: 5px;
  background: black;
  width: 40px;
  left: 100%;
  top: calc(50% - 2px);
}

 <div class="example"></div>

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

Answer 2

有多种方法可以做到这一点。例如，您可以添加以下 CSS：

 .example:after {
    content: '';
    position: absolute;
    top: 50px;
    left: 100%;
    border-top: 1px solid #000;
    width: 100px;
}

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