<!DOCTYPE html>
<style>
.b::before {
content: '[before]';
color: blue;
}
.a::after {
content: '[after]';
}
span {
color: blue;
}
rt {
background: yellow;
}
</style>
<p>Tests that CSS-generated :before or :after content just appear as
if they were the first or last DOM child of the ruby element.</p>
<p>The blue text should have annotations above them (yellow background).</p>
</p>Foo <ruby class="b"><span>b</span><rt>long text</rt></ruby> Bar<br></p>
</p>Foo <ruby class="a"><span>b</span><rt>long text</rt></ruby> Bar<br></p>
</p>Foo <ruby class="b a"><span>b</span><rt>long text</rt></ruby> Bar<br></p>