CSS在div之后添加行

Question

我在这里有这个div

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

这是CSS

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

我想要做的是在这个框中间添加一条线,触摸中间框的右侧,我将如何实现这一目标？

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>