Demo: CSS hanging-punctuation

<div class='text-container'>
  <p class='hanging-punctuation'>“This is an example of hanging punctuation. Notice how the punctuation at the beginning of the line hangs outside the margin, creating a unique visual effect!”</p>
</div>

.text-container {
  width: 300px;
  margin: 20px;
  font-family: Arial, sans-serif;
  font-size: 18px;
}

.hanging-punctuation {
  hanging-punctuation: first;
  text-align: justify;
  margin-left: -0.5em;
  display: inline-block;
}

// No JavaScript required for this demo

“This is an example of hanging punctuation. Notice how the punctuation at the beginning of the line hangs outside the margin, creating a unique visual effect!”