Red 'untranslated' marker seem in wrong position.

If there are <span>s wrapped around the list, this may be possibly wrong HTML. At least arbitrary nestings of block elements with inline elements are not allowed and may indeed confuse CSS up to a complete mess. The list itself is a block element, and each list item is, too, unless you respecify them in your CSS.

I naïvely think, wrapping translateable inline elements into another inline element, like <span>, and wrapping transalteable block elements into another block element, like <div> for the purpose of marking would be a good choice, but also I am neither an HTML nor a CSS guru.

The thing is it is not easy to say whether it is a block or inline element, or neither.

Yep. I was afraid to get this reply, and I agree :-(