Cody Jones Cody Jones - 3 months ago 9
CSS Question

Content: Open-quote is showing as a single quote

I am using Content: Open-quote and the first time I use it, it looks fine, but the second time its a single quote and that isn't what I want. Here is a jsfiddle showing the issue.

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

You never set close-quote to blockquote:after.

Like in normal sentences, single quotes are used within double-quotes!

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

Updated Fiddle

Comments