I created a basic demo where the HTML markup was the same, but one extra rule was applied in one case and not in the other. Here is the Markup:
<div class="rc40w1 oform oform-initialized">
<div class="rc40w5 hide">
<div class="rc40w3">
<ul class="chk-ul oform-w1 ovalid rc40open">
<li>
<label for="5A0B0A9213D344628F4BBA4029291F4E">
<input type="checkbox"
id="5A0B0A9213D344628F4BBA4029291F4E"
name="5A0B0A9213D344628F4BBA4029291F4E"
value="5A0B0A9213D344628F4BBA4029291F4E"
class=" ">
<span class="obox"></span>
<span class="rc40label">
Infrastructure
</span>
</label>
</li>
</ul>
</div>
</div>
Example 1 : Check my code here
https://jsbin.com/supateketa/3/edit?html,css,output https://i.sstatic.net/lKC30.png
If you observe the class="obox", before the pseudo element there is only one class as shown in the screenshot.
In Second Example
An extra class is added in this case: :root input+.obox:before, why?
https://jsbin.com/hovaxakeba/edit?html,css,output
https://i.sstatic.net/rKtUP.png
Why is it not added in the first example?
I am curious to know why it is added in one scenario and not in the other.
:root input+.obox:before {
position: relative;
left: -2px;
}