How can I reduce background width and reducing the div width

Question

So, I want to keep the same size box with the same borders however I do not want to color the whole background. I just want to color the few pixels in the center of it to make a red line in the middle of the box. I can achieve that by creating another div element but I want to use one element to do both. is it possible?

  background-color: red;
  position: absolute;
  margin: 120px 30px 0px 30px;

  height: 140px;
  width: 400px;
  border: 0.2rem rgba(172, 255, 47, 0.565) solid;

this is what it looks like now I want to keep the same box size with those borders and instead of the hole box red. I want just a line in the center, is it possible?

Answer 1

I used CSS pseudo element to insert the red box and then used css transform to position the box in the center. Does this solution meet your requirements ?

.container {
  position: absolute;
  margin: 120px 30px 0px 30px;
  height: 140px;
  width: 400px;
  border: 0.2rem rgba(172, 255, 47, 0.565) solid;
}

.container::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  transform: translate(200px, 70px);
  background-color: red;
}

<div class="container"></div>