<style>
p {
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
}

.expected {
    position: absolute;
    width: 300px;
    height: 100px;
    background-image: linear-gradient(to right, rgba(111, 168, 220, 0.66) 33.3%, transparent 33.3%, transparent 66.6%, rgba(111, 168, 220, 0.66) 66.6%);
}
.actual, .actual::before {
    display: inline-block;
    width: 100px;
    height: 100px;
}
.actual {
    position: relative;
}
.actual::before {
    position: absolute;
    left: 200px;
    content: "";
}
</style>
<body>
    <div id="test1">
        <div class="expected" hidden></div>
        <div class="actual"></div>
    </div>

    <p>Inspect this page and hover the `<code>.actual, .actual::before</code>` CSS selector in the Styles panel of the details sidebar in the Elements tab.  Click <button>Show Expected</button> to compare with the expected result.</p>
    <script>
let showingExpected = false;
document.querySelector("button").addEventListener("click", (event) => {
    showingExpected = !showingExpected;
    for (let node of document.querySelectorAll(".expected"))
        node.hidden = !showingExpected;
});
    </script>
</body>