The :before and :after pseudo-elements

BODY:after {
  content: "The End";
  display: block;margin-top: 2em;
  text-align: center;
} 
H2:before {
  content: "サンプル" counter(chapter) ":\A";
  counter-increment: chapter;
} 
P.note { background: #ddd } 
P.note:before { content: "Note: " } 
P.note:after { content: "\A終わり" }
DT:before { content: url(../img/frbut34.gif) " " }
IMG:after { content: " [ " attr(alt) " ]" } 
Q:before { content: open-quote;color: red } 
Q:after { content: close-quote;color: blue } 
Q { quotes: '"' '"' "'" "'" } 
BLOCKQUOTE   P{ quotes: '引用開始 ' ' 引用終わり' } 
BLOCKQUOTE  P:before { content: open-quote } 
BLOCKQUOTE  P:after { content: close-quote }

P.note:before { content: "Note: " }

この段落のclass属性値はnote。先頭に「Note: 」というテキストが挿入される。

DT:before { content: url(../img/frbut34.gif) " " }

DT
DTの前に、丸い画像とスペースが挿入される。

IMG.yahoo:after { content: " [ " attr(alt) " ]" }

画像の後ろに、「[ YAHOO!へ ]」というテキストが挿入される。 YAHOO!へ

Q:before { content: open-quote;color: red }
Q:after { content: close-quote;color: blue }
Q { quotes: '"' '"' "'" "'" }

引用の前後に引用符が付く。開始は赤、終了は青になる。引用中の引用の引用符は「'」。

BLOCKQUOTE P{ quotes: '引用開始 ' ' 引用終わり' }
BLOCKQUOTE P:before { content: open-quote }
BLOCKQUOTE P:after { content: close-quote }

この文章は引用している。先頭に「引用開始 」、終わりに「 引用終わり」というテキストが挿入される。

戻る