Codrops Playground

#cssref :lang() by SaraSoueidan

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

#cssref :lang()

by SaraSoueidan on

Demo for the Codrops CSS Reference entry :lang()

Codrops Logo Codrops Playground

Version 0.0.9 (alpha)

Codrops Playground is currently in development with many features to come, including mobile support. We are in alpha stage right now, so if you find a bug, please send a mail to playground@codrops.com or use the contact form on Codrops.

If you'd like to stay updated, follow us on Twitter @codrops. Thank you and stay tuned :)