<div class="main-column">
   <q>This is an inline quote, using default browser styles. It probably has quotes around it, even though there are none in the HTML.</q>
  
  <blockquote>
    <p>This is a blockquote, using default browser styles. It probably has a margin on all sides.</p>
  </blockquote>
  
  
  <blockquote class="hanging-punctuation">
     <p>“This is another blockquote, but this one also uses the hanging-punctuation CSS property. Open this page in Safari to see the effect.”</p>
  </blockquote>
  
  <blockquote class="simulated-hanging-punctuation">
     <p>This third blockquote uses pseudo-elements and a negative left margin to simulate the hanging-punctuation property.</p>
  </blockquote>
</div>

html {
  font-size: 1.25em;
}

.main-column {
  width: 45ch;
  max-width: 100%;
  margin: 1rem auto;
}

blockquote.hanging-punctuation p {
  hanging-punctuation: first;
}

blockquote.simulated-hanging-punctuation p {
  quotes: '“' '”' '‘' '’';
}

blockquote.simulated-hanging-punctuation p::before {
  content: open-quote;
  /* Adjust this value to move the first line of text */
  margin-left: -0.88ch;
}

blockquote.simulated-hanging-punctuation p::after {
  content: close-quote;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.