The content of the #rtl:before rule in the attached example is rendered at the wrong place. The second blue text must be position on the first line on the right, not on the left.

1. rtl.html‎ 4.1 kB
2. rtl.pdf‎ 15.5 kB

But Firefox and Chrome also put it on the left?

The question is what the standard tells us? If the direction right-to-left then the semantics of :before should be "appear on the right hand site" IMO.

I think it is more complicated than that. Normally, the ::before pseudo-element is similar to a child element at the beginning of the block, eg.

<p><span>before</span> following text...</p>

If you apply "unicode-bidi: embed" to the span then it will be displayed on the right, even if it contains left-to-right text.

But this has no effect on pseudo-elements, in Prince or in browsers. I'm sure there is a good reason for this, but I'm struggling to remember exactly what it is.

Oh yes, now I remember. If you just say "content: 'text'" on the pseudo-element, then it is not creating a separate distinct span, but just add the text content to the parent paragraph, and so the unicode-bidi property has no effect in this case.

But if you applied "display: inline-block" then it would create a separate distinct box, and the unicode-bidi property would apply as expected.

Please note that if all the text is Arabic or Hebrew, then it will display right-to-left with the ::before on the right as expected, and this will not be an issue!

If you are using Latin text or some other left-to-right script, then you could apply "float: right" to move it to the right instead.