Mirror quotes CSS3

Question

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?

score 0 · Accepted Answer · answered Oct 04 '16 at 11:02

0

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!

answered Oct 04 '16 at 11:02

PetarS

1,213
9
4

Thank you so much! – Siddhi Oct 04 '16 at 11:05
But surely this will also the double the scale of the quote? `scale(-1, 1)` as stated in the question should work for just mirroring it horizontally. – DBS Oct 04 '16 at 11:07
Ah sorry, totally forgot about the mirroring. My bad. ^_^ – PetarS Oct 04 '16 at 11:16

Mirror quotes CSS3

1 Answers1