CSS 疑似要素
CSS 擬似要素
CSS 擬似要素は、セレクターに特殊効果を追加するために使用されます。
構文
疑似要素の構文:
selector:pseudo-element {property:value;}
CSS クラスでも疑似要素を使用できます:
selector.class:pseudo-element {property:value;}
:first-line 擬似要素
「first-line」擬似要素は、テキストの最初の行に特別なスタイルを設定するために使用されます。
注: 「first-line」疑似要素は、ブロックレベルの要素にのみ使用できます。
注: 次のプロパティを「最初の行」擬似要素に適用できます:
font プロパティ
color プロパティ
background プロパティ
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 擬似要素
"first-letter" 擬似要素は、テキストの最初の文字に特別なスタイルを設定するために使用されます
注: "first-letter" " 疑似要素はブロックレベルの要素でのみ使用できます。
注: 次のプロパティを「first-letter」擬似要素に適用できます:
font プロパティ
color プロパティ
background プロパティ
margin プロパティ
padding プロパティ
border プロパティ
text-decoration
vertical -align ("float" が "none" の場合のみ)
text-transform
line-height
float
clear
疑似要素と CSS クラス
疑似要素はCSS クラスと組み合わせることができます:
p.article:first-letter {color:#ff0000;}
<p class="article">記事内の段落</p>
上記の例は次のようになりますクラス記事を含むすべての段落の最初の文字が赤になります。
複数の疑似要素
は、複数の疑似要素と組み合わせて使用できます。
以下の例では、段落の最初の文字が赤色で表示され、フォントサイズはxx-largeになります。最初の行の残りのテキストは青色で、小さな大文字で表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>CSS - :before 擬似要素
":before" 擬似要素は、要素のコンテンツの前に新しいコンテンツを挿入できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::before 伪元素示例</title>
<style type="text/css" media="all">
div::before
{
background: lightgreen;
content: "张三";
}
</style>
</head>
<body>
<div>今天来学习知识</div>
</body>
</html>CSS - :after 擬似要素
「:after」擬似要素は、要素のコンテンツの後に新しいコンテンツを挿入できます。
りー- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜 