基本疑似要素
- ::first-line〔ブロック要素の先頭行のみスタイルを適用〕
- ::first-letter〔ブロック要素の最初の1文字目のみスタイルを適用〕
- ::before〔要素の前にコンテンツ挿入〕
- ::after〔要素の後にコンテンツ挿入〕
::first-line
ブロック要素の先頭行のみスタイルを適用
unknown
E::first-line {}
IE未対応
:first-line擬似要素は、ブロック内の先頭行にスタイルを適用します。 ブロックレベル要素にのみ指定可能です。
<style type="text/css">
p.quotation {
font-size:13px;
border-left:5px solid #ccc;
border-right:5px solid #ccc;
padding:0 5px;
}
p.quotation:first-line {
font-size:17px;
font-weight:bold;
}
</style>
<p class="quotation">
:first-line<br>
このように、最初の1行目だけに指定したスタイルが適用される擬似要素です。<br>
ブロック要素のみ指定可能です。
</p>
:first-line
このように、最初の1行目だけに指定したスタイルが適用される擬似要素です。
ブロック要素のみ指定可能です。
::first-letter
ブロック要素の最初の1文字目のみスタイルを適用
unknown
E::first-letter {}
IE未対応
:first-letter擬似要素は、ブロック内の最初の1文字目にスタイルを適用します。 ブロックレベル要素にのみ指定可能です。
使用例1
<style type="text/css">
/* 先頭の1文字目だけ文字のサイズを大きくする */
div.fstr:first-letter { font-size:2em; }
</style>
<div class="fstr">first-letter</div>
first-letter
使用例2
<style type='text/css'>
/* 連番風 */
p.fno:first-letter {
margin-right:5px; padding:5px;
background-color:#366;
font-weight:bold; font-size:13px; color:#fff;
}
</style>
<p class='fno'>1擬似要素first-letterは、最初の文字だけに適用されます。</p>
<p class='fno'>2ブロック要素にのみ指定可能です。</p>
1擬似要素first-letterは、最初の文字だけに適用されます。
2ブロック要素にのみ指定可能です。
使用例3
<style type="text/css">
/* 先頭の1文字を強調 */
p.letter:first-letter {
float:left;
margin:0 5px 0 0; padding:7px;
border:1px solid #9cb2d6;
font-weight:bold; font-size:150%; color:#9cb2d6;
line-height:1.5;
}
</style>
<p class="letter">先頭の1文字目だけに特定のスタイルを指定したい場合は、first-letterという擬似要素を使用します。この擬似要素は、p、div、blockquoteなどのブロック要素のみ指定可能です。インライン要素には使えません。</p>
先頭の1文字目だけに特定のスタイルを指定したい場合は、first-letterという擬似要素を使用します。この擬似要素は、p、div、blockquoteなどのブロック要素のみ指定可能です。インライン要素には使えません。
::before
要素の前にコンテンツ挿入
unknown
E::before {}
IE未対応
:before擬似要素は、要素の内容の前にcontentプロパティで指定した内容（テキスト、画像など）を挿入します。
p要素の内容の前にテキストを挿入
<style type="text/css">
p.note {
color:red;
}
p.note:before {
content:"Note. ";
font-weight:bold;
color:red;
}
</style>
<p class="note">:before擬似要素はIE未対応です。</p>
:before擬似要素はIE未対応です。
a要素の内容の前に画像を挿入
<style type="text/css">
a.mailaddress:before {
content: url(/content/img/icon/color/letter.gif);
padding:0 5px 0 0;
vertical-align:middle;
}
</style>
<a href="mailto:your-email@domain.co.jp" class="mailaddress">your-email@domain.co.jp</a>
::after
要素の後にコンテンツ挿入
unknown
E::after {}
IE未対応
:after擬似要素は、要素の内容の後にcontentプロパティで指定した内容（テキスト、画像など）を挿入します。
印刷モードの時にリンク先URLを表示
<style type="text/css">
@media print {
a:after,
a:visited:after {
content: " (" attr(href) ") ";
font-size:85%;
}
</style>
印刷時に下記のようにhref属性に指定したURLが括弧付きで表示されます（IE未対応）。
p要素の内容の後にテキストを挿入
<style type="text/css">
li.entry_upd:after {
content:" [update]";
font-weight:bold;
color:blue;
font-size:80%;
}
li.entry_new:after {
content:" [new]";
font-weight:bold;
color:red;
font-size:80%;
}
</style>
<ul>
<li class="entry_new">記事タイトル</li>
<li>記事タイトル</li>
<li>記事タイトル</li>
<li class="entry_upd">記事タイトル</li>
<li>記事タイトル</li>
</ul>- 記事タイトル
- 記事タイトル
- 記事タイトル
- 記事タイトル
- 記事タイトル
p要素の内容の後に画像を挿入
<style type="text/css">
a.external_link:after {
content:url(/content/img/icon/external.gif);
padding:0 0 0 5px;
}
</style>
<a href="http://www.google.co.jp/" class="external_link">Google検索</a>