JSFiddle - React, Tailwind, and code Playground

HTML

<span class="bread">
    <span class="wrap">
        <li class="crumb">A</li>
        <li class="crumb">B</li>
    </span>
</span>

<div id="output"></div>

CSS

.bread {
    border: 1px solid green;
}

.bread .wrap {
    border: 1px solid orange;
}

.bread .crumb {
    color: red;
}

.bread :first-child.crumb::before {
    display: none;
}

.bread .crumb::before {
    content: 'Z'
}

JavaScript

document.getElementById('output').innerHTML = 'TEST';