Search code examples
csstransformquotesblockquote

Mirror quotes CSS3

I've declared quotes like

.quotes { quotes: "\201C""\201D"; }

But in fact I only use the open-quote because the end-quote is supposed to be the open-quote mirrored horizontally (for visual reasons, the end-quote of that font looks like crap).

So I got:

.quotes:after { content: open-quote; }

That worked fine so I tried to apply "transform: scale(-1, 1);" to .quotes:after but this doesn't work. Any suggestions?

Solution

  • When you have a pseudo element and you want to add some specific styling to it, in your case the only thing you might need to do is:

    display:   inline-block;
transform: scale(-2, 2);

    The display: inline-block will allow you to modify it properly, and when using scale, mind that 1 is default value. So if you have display: inline-block; transform: scale(-1, 1), you won't see anything change.

    Cheers!