HTML
10
1
<div class="container">2
<h2>English (en)</h2>3
<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>4
<hr>5
<h2>French (fr)</h2>6
<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>7
<hr>8
<h2>German (de)</h2>9
<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>10
</div>CSS
44
1
body {2
background-color: #F5F5F5;3
color: #333;4
font-size: 1.5em;5
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;6
}7
8
hr {9
margin: 50px 0;10
}11
12
.container {13
margin: 40px auto;14
max-width: 700px;15
}16
17
q:before {18
content: open-quote;19
}20
21
q:after {22
content: close-quote;23
}24
25
q:before,26
q:after {27
color: deepPink;28
font-size: 1.5em;29
}30
/* English quotes */31
32
q:lang(en) {33
quotes: '\201C' '\201D' '\2018' '\2019';34
}35
/* French quotes */36
37
q:lang(fr) {38
quotes: "«" "»" "‹" "›";39
}40
/* German quotes */41
42
q:lang(de) {43
quotes: '»' '«' '\2039' '\203A';44
}JS
1
1