JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h1>only one hasdata</h1>
    <span class="item multifilter-wrapper multifilter">
  <span class="item multifilter multifilter-item">
    <div></div>
  </span>
  <span class="item multifilter multifilter-item">
     <div></div>
  </span>
  <span class="item multifilter multifilter-item hasdata">
     <div>HELLO</div>
  </span>
</span>
</div>

<div>
    <h1>a few hasdata</h1>
    <span class="item multifilter-wrapper multifilter">
 
        
  <span class="item multifilter multifilter-item hasdata">
     Hello
  </span>
        
  <span class="item multifilter multifilter-item">
    
  </span>
  <span class="item multifilter multifilter-item">
    
  </span>
  <span class="item multifilter multifilter-item hasdata">
     Hello
  </span>
  <span class="item multifilter multifilter-item hasdata">
     Yello
  </span>
  <span class="item multifilter multifilter-item hasdata">
     Mello
  </span>
</span>
</div>

CSS

.multifilter-wrapper .hasdata ~ .hasdata::before{
   content: '|';
}