JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <p>ABC</p>
</div>

<div class="parent">
  <p>ABC</p>
</div>

<div class="parent">
  <p>ABC</p>
</div>

<div class="parent">
  <p>ABC</p>
</div>

<div class="parent">
  <p>ABC</p>
</div>

CSS

p
{
  margin: 0; 
}

.parent
{
  position: relative;
  background: #aaa;   
  padding-left: 50%;  
  border-bottom: 1px solid #ddd;
  /* these two attributes prove that .parent:before is positioned relative to .parent */
  top: 50px;
  left: 50px;
}

.parent:before
{
  position: absolute;
  left: 0px;  
  background: orange;  
}

.parent:before
{
  content: "XYZ";
}