Question

我需要一些帮助...

我正在尝试设置一个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>

我到目前为止的样式：

.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伪元素的样式正确，而blockquote填充本身也没问题。

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

任何帮助都将不胜感激。

Answer 1

放置似乎很困难的原因是由于引号上的巨大默认行高。您可以通过设置

来更多地控制它

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

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

CSS伪元素块引用

1 个答案: