『Web標準の教科書』各章

第3章第12節（p.261-270）

p.note:before {
  content: "Note! ";
  color: red;
  font-weight: bold;
  }
：
：
<p class="note">contentプロパティの使い方について</p>

a.external:after { content: url(../images/external.gif) }
：
：
<a class="external" href="http://www.w3.org/">W3C (World Wide Web
Consortium)</a>

img:before { content: attr(alt) }
：
：
<img src="./images/grid.gif" alt="グリッドシステムのイメージ図"
width="160" height="120" />

p:before { content: "He just said 'Absolutely.'" }
p:before { content: "He just said \"Absolutely.\"" }
p:before { content: "He just said \22Absolutely.\22" }
p:before { content: 'He just said "Absolutely."' }
p:before { content: 'He just said \'Absolutely.\'' }
p:before { content: 'He just said \27Absolutely.\27' }

p:before { content: "He just sa\
id 'Absolutely.'" }

p:before {
  display: block;
  content: "He just said\A 'Absolutely.'";
  }

h1:before { content: counter(chapter) " " }
h2:before { content: counter(chapter) "." counter(section) " " }
h3:before { content: counter(chapter) "." counter(section) "."
counter(subsection) " " }

h1 { counter-increment: chapter }

h1 { counter-increment: chapter 1 }

h1 { counter-increment: chapter 1 section 2 }

h2 {
  counter-increment: section;
  counter-reset: subsection;
  }

h1 { counter-increment: chapter }
h1:before { content: counter(chapter) " " }
h2 {
  counter-increment: section;
  counter-reset: subsection;
  }
h2:before { content: counter(chapter) "." counter(section) " " }
h3 { counter-increment: subsection }
h3:before { content: counter(chapter) "." counter(section) "."
counter(subsection) " " }

h1:before { content: counter(chapter, upper-ratin) " " }
h2:before { content: counter(chapter, upper-ratin) "."
counter(section, lower-ratin) " " }
h3:before { content: counter(chapter, upper-ratin) "."
counter(section, lower-ratin) "." counter(subsection, disc) " " }

ol { counter-reset: item }
li { display: block }
li:before {
  content: counters(item, ".");
  counter-increment: item;
  }
：
：
<ol>
  <li>項目</li>
  <li>項目
    <ol>
      <li>項目</li>
      <li>項目</li>
      <li>項目
        <ol>
          <li>項目</li>
        </ol>
        <ol>
          <li>項目</li>
        </ol>
      </li>
      <li>項目</li>
    </ol>
  </li>
  <li>項目</li>
  <li>項目</li>
</ol>

<ol>
  <li>項目</li>
  <li>項目</li>
</ol>

@media aural {
   blockquote:after { content: url(quote_end.wav) }
   }

:lang(en) q { quotes: '"' '"' "'" "'" }
:lang(ja) q { quotes: "「" "」" "『" "』" }
q:before { content: open-quote }
q:after  { content: close-quote }
：
：
<p lang="en-US">He said <q>I was called <q>chicken<q> by her</q>
with little sorrow yesterday.</p>
<p lang="ja">彼は昨日、<q>彼女から<q>卑怯者</q>といわれてしまった
よ</q>とこぼしていた。</p>

:lang(en) q { quotes: "\0022" "\0022" "\0027" "\0027" }
:lang(ja) q { quotes: "\300C" "\300D" "\300E" "\300F" }

第3章 第12節（p.261-270）

Chapters

第3章第12節（p.261-270）