<div class="container">
  <h2>English (en)</h2>
  <q lang="en">This is a quote quoting Steve Jobs saying <q>Design is not just what it looks like and feels like. Design is how it works.</q> for inspiration. </q>
  <hr>
  <h2>French (fr)</h2>
  <q lang="fr">This is a quote quoting Steve Jobs saying <q>Design is not just what it looks like and feels like. Design is how it works.</q> for inspiration. </q>
  <hr>
  <h2>German (de)</h2>
  <q lang="de">This is a quote quoting Steve Jobs saying <q>Design is not just what it looks like and feels like. Design is how it works.</q> for inspiration. </q>
</div>
body {
  background-color: #F5F5F5;
  color: #333;
  font-size: 1.5em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

q:before,
q:after {
  color: deepPink;
  font-size: 1.5em;
}
/* English quotes */

q:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}
/* French quotes */

q:lang(fr) {
  quotes: "«" "»" "‹" "›";
}
/* German quotes */

q:lang(de) {
  quotes: '»' '«' '\2039' '\203A';
}