Adding Double Quotes to a Paragraph with CSS

Adding double quotes to a paragraph with CSS

Use pseudo-elements:

p.myclass:before, p.myclass:after {
    content: '"';
}

Fiddle: http://jsfiddle.net/2bE8j/1/

Add Quotation marks to :before and :after elements

You need to unicode-escape the content property like this:

content: "\0022";

http://codepen.io/MattDiMu/pen/jryOQj

Adding quotes to blockquote

I think that this should work:

http://jsfiddle.net/bt1r6psx/

Make blockquote as position: relative and blockquote:after and blockquote:before, position absolute. Then you can position them wherever you want.

HTML:

<div class="wrapper">      
  <blockquote>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </blockquote>      
</div>

CSS:

blockquote {
    position: relative;
    /* background: #ddd; */
}

blockquote:before {
  position: absolute;
  content: open-quote;
  font-size: 4em;
  margin-left: -0.6em;
  margin-top: -0.4em;
}
blockquote:after {
  position: absolute;
  content: close-quote;
  font-size: 4em;
  bottom: 0;
  right: 0;
  margin-right: -0.6em;
  margin-bottom: -0.8em;
}
blockquote p {
  display: inline;
}

Big Quotation marks styled in html css

Although it's not clear after reading your question I guess you want to change the shape of quotation marks.

Pick a proper unicode value and add a quotes property. E.g.

blockquote {    border:none;    font-family:Georgia, "Times New Roman", Times, serif;    margin-bottom:-30px;    quotes: "\201C""\201D""\2018""\2019";}
blockquote h3 {font-size:21px;}
blockquote h3:before { content: open-quote;font-weight: bold;font-size:100px;color:#889c0b;} blockquote h3:after { content: close-quote;font-weight: bold;font-size:100px;color:#889c0b;  }

<div class="container"><blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote></div>

When adding quotation marks around text is it okay to use CSS pseudo-elements?

The quotation marks can safely be included in the CSS without violating any HTML5 best practices.

First, browsers normally don't display quotation marks when rendering the <blockquote> element. Chrome, Firefox and IE10 apply indentation to blockquotes by default. So it's not like you're removing quote marks that are normally there by putting them in the CSS.

Second, you mentioned the word "style" in your question a couple of times. That's a good hint at where the quotation marks should go.

Third, the ::before and ::after pseudo-elements are specifically designed for adding cosmetic content, like quotation marks. In fact, if you read the MDN page for ::before you'll find that their primary use-case example is precisely about adding quotation marks.

CSS content for double quote doesn't work

Try this:

CSS:

.blockquote p::before {
content: open-quote;
font-family: serif;
font-size: 3em;
line-height: 0;
display: inline;
margin: 0 0 20px 0;
}

HTML

<div class="blockquote">
<p>Lorem ipsum...</p>
</div>

Correct HTML for multi-paragraph quotes

The previous answer (redefining quotes: '\201c' '\201d' '\2018' '\2019';) works, but it overrides the user's locale and forces American style quotation marks.

Instead, this:

<style>
    q.continued::after { font-size: 0; }
</style>
…
<p>
    I replied, <q class="continued">Blah blah blah.</q>
</p>
<p>
    <q class="continued">And not only that!</q>
</p>
<p>
    <q>So there!</q>, and left the room.
</p>

Produces:

I replied, ”Blah blah blah.

”And not only that

”So there!”, and left the room.

Which should work correctly with any locale's quotation characters.

---

Note that display:none would be better, but it doesn't work.
The browser (Chrome at least) notices that the closing quote is missing and switches to the alternate quote mark for the following paragraphs.

---

Related Topics