CSS pseudo element blockquote

Question

I need some help...

I am trying to style a blockquote elemet:

<div class="container-fluid testimonials padding">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-5 col-md-offset-2 col-lg-5 col-lg-offset-2">
            <blockquote>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vul. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vul.
            </blockquote>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">

        </div>
    </div>
</div>

Styling I have so far:

.padding {padding-top:2%;padding-bottom:2%;}

blockquote {padding:60px 30px 40px 95px;border:none;position:relative;font-family: 'Comfortaa', cursive;}

blockquote::before{
  content: "\201C";
  font-family: 'Comfortaa', cursive;
  font-size: 180px;
  font-weight: bold;
  color: #999;
  position: absolute;
  left:20px;
  top:-40px;
  color:#b80072;
  z-index: -1;
}

blockquote::after{
  content: "\201D";
  font-family: 'Comfortaa', cursive;
  font-size: 180px;
  font-weight: bold;
  color: #999;
  position: absolute;
  right:5%;
  bottom:-45%;
  color:#b80072;
  z-index: -1;
  opacity:0.5;
  width:90px;
}

@media (max-width: 510px) {
    blockquote::after {bottom:-25%;}
}

The result is almost what I want to achieve.

The before pseudo element is styled correctly and the blockquote padding itself is fine.

The problem is styling the after pseudo element as. How do I get it to stick to the bottom right hand corner of the blockquote element?

Any help would be appreciated.

Answer 1

The reason the placement seems difficult is because of the huge default line height on the quote marks. You can get a bit more control of it by setting

blockquote::after {line-height: 0;}

... though it's not an ideal solution.