How to hide first pseudo css element - css

Question

Is it possible to hide the first pseudo element?
<div id="builder-widgets_rule_0" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
this html element has a pseudo styling like this:
.custom-condition::before {
content: '';
position: absolute;
width: 1px;
height: auto;
min-height: 25px;
border: 2px solid #f1f1f1;
top: -25px;
left: 50%;
margin-left: -2px;
}
It is not possible to do something like this?
.custom-condition:first-child::before {
content: '';
}
Also tried to added a span element to avoid the psuedo element like this:
<div id="builder-widgets_rule_0" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
<div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
<div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
<div class="smallLine"></div>
</div>
Just copied the psuedo styling to the .smallLine

Answer 1

If all the elements are inside the same wrapper you can do this. Instead of removing the pseudo-element from the first simply define it for all the other but not the first.
.custom-condition ~ .custom-condition::before {
content: '[Before]';
}
<div>
<div> OR </div>
<div class="custom-condition"> AND </div>
<div class="custom-condition"> AND </div>
<div> OR </div>
<div class="custom-condition"> AND </div>
</div>
UDPATE
You can consider the parent element with your current HTML structure
.rule-container ~ .rule-container .custom-condition::before {
content: '[Before]';
}
<div id="builder-widgets_rule_0" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container">
<div class="custom-condition">AND</div>
</div>