CSS在div后添加一条线

Question

我有这个div在这里。

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

这里是CSS样式

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

我要做的是在此框后添加一条线，该线应与框正中间的右侧相接触，我该如何实现这一目标？

- user979331

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

Answer 2

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

.example:after{
content:"";
position:absolute;
top:50%;
left:100%;
width:200px;
height:2px;
margin-top:-1px;
background:red;
}

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

- CodingKiwi

Answer 3

.example:after {
  content: '';
  width: 100px;
  height: 5px;
  background: black;
  display:inline-block;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0,-100%);}

- Waxi

Answer 4

有多种方法可以实现这个功能。例如，您可以添加以下 CSS：

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

- Kamil Socha