<div class="wrapper">
  <blockquote lang="en">
    Hello! I am a block quote in English. Check out how the quotation marks are automatically added around me!
  </blockquote>

  <blockquote lang="fr">
    Salut ! Je suis une citation en français. Je ne connais pas le français, alors j’ai demandé à quelqu’un sur Twitter de le traduire !
  </blockquote>
</div>

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

blockquote::before, blockquote::after {
  opacity: 0.25;
  padding: 0 10px;
  font-size: 3em;
}

blockquote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
  padding: 20px 10px;
  border-radius: 10px;
  background-color: #e5ddcb;
}

/* everything below is for demo appearances and not important to the concept */

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  color: #ab526b;
  background-color: #827085;
  font: 900 1.375rem/1.5 'Merriweather', serif;
  font-style: italic;
  text-align: center;
}

.wrapper {
  max-width: 660px;
}

@media (max-width: 450px) {
  body { font-size: 1rem; }
}