CSS add line after div

Question

I have this div here

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

and here is the CSS

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

What I am trying to do is add line after this box that is touching the right side of the box in the middle, how would I accomplish this?

Answer 1

You need to use ::after pseudo-element

.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>