CSS 伪元素块引用

Question

我需要一些帮助...

我正在尝试设置块引用元素的样式：

<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>

我目前的风格：

.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%;}
}

结果几乎是我想要达到的。

before 伪元素的样式正确，块引用填充本身很好。

问题在于将 after 伪元素设置为。如何让它粘在 blockquote 元素的右下角？

任何帮助将不胜感激。

Answer 1

放置看起来很困难的原因是引号上的默认行高很大。你可以通过设置来获得更多的控制权

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

...虽然这不是一个理想的解决方案。