0

I tried to search on stack but could not get exact answer.

There is a paragraph with double quotes.

Here is my code

I want to flip the second quote as shown in 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(https://i.stack.imgur.com/Rikc9.png) -13px -20px no-repeat;
}
.paraCnt:after {
  left: auto;
  right: -50px;

}
will.kelly
  • 13
  • 2
  • http://stackoverflow.com/questions/18609819/how-to-flip-glyphicon-icon – Ovi Faur Jul 22 '14 at 14:38
  • Do you really need to flip? You seem to have both the type of quotes in a sprite sort of image. [This](http://codepen.io/hari_shanx/pen/GtyKw) should be enough. – Harry Jul 22 '14 at 14:41
  • I had added them for reference. Thanks for the reply. It was too simple. – will.kelly Jul 22 '14 at 14:48

1 Answers1

0

DEMO

CSS changes

.paraCnt:after {
  left: auto;
  right: -50px;
  -webkit-transform: scaleX(-1); /**Add this**/
  transform: scaleX(-1); /**Add this**/
}
Tushar
  • 4,280
  • 5
  • 24
  • 39