使用css3翻转图标

Question

我试图在堆栈上搜索，但无法得到确切的答案。

有一段带双引号。

Here is my code

我想翻转第二个引号，如this image所示

HTML

<div class="paraCnt">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

CSS

.paraCnt {
  width: 800px;
  margin: 0 auto;
  position: relative;
  color: #fff

}
body {
  background: #285fac;
}
.paraCnt:before,
.paraCnt:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: -50px;
    height: 34px;
    width: 39px;
    background: url(http://i.stack.imgur.com/Rikc9.png) -13px -20px no-repeat;
}
.paraCnt:after {
  left: auto;
  right: -50px;

}

Answer 1

DEMO

CSS 变化

.paraCnt:after {
  left: auto;
  right: -50px;
  -webkit-transform: scaleX(-1); /**Add this**/
  transform: scaleX(-1); /**Add this**/
}