html - 内容 : Open-quote is showing as a single quote

Question

我正在使用 Content: Open-quote，我第一次使用它时，它看起来不错，但第二次它是一个单引号，这不是我想要的。这是一个显示问题的 jsfiddle。

https://jsfiddle.net/rx3nu2hv/

HTML

 <div class="row-fluid">
        <div class="col-sm-6 col-md-6">
            <div class='testimonial'>
            <blockquote><p>John doe provides an excellent service in a record time.  We needed him to design a mobile compatible website and he was able to complete the job earleir than we had anticipated and with higher quality than you would expect from most.</p></blockquote>
                <div class='testimonial-left'>
                    <p>Jane Doe</p>
                    <p>Software Developer</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-6">
            <div class='testimonial'>
            <blockquote><p>John Doe provides an excellent service in a record time.  We needed him to design a mobile compatible website and he was able to complete the job earleir than we had anticipated and with higher quality than you would expect from most.</p></blockquote>
                <div class='testimonial-left'>
                    <p>Jane Doe</p>
                    <p>Software Developer</p>
                </div>
            </div>
        </div>
    </div><!--/row-fluid-->

CSS

.testimonial blockquote
{

  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";

}

.testimonial blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}

.testimonial-left
{
float:left;
margin-left:10%;
}

Answer 1

您永远不会将 close-quote 设置为 blockquote:after。

与普通句子一样，双引号内使用单引号!

.testimonial blockquote:after {
  content: close-quote;
  color: #ccc;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}

Updated Fiddle