CODEWITHSUNDEEP
csstransformquotesblockquote
Siddhi
Siddhi

Reputation: 23

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?

Upvotes: 2

Views: 87

Answers (1)

PetarS
PetarS

Reputation: 1313

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!

Upvotes: 0

Related Questions