CSS3において、擬似要素とはセレクターの最後に付加されるキーワードで、文字通りの意味は「偽の要素」または「偽装要素」であり、実際には仮想的な要素であり、主に擬似要素が使用されます。 for DOM ツリーにない要素をいくつか作成し、それらにスタイルを追加します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 擬似要素
擬似要素の文字通りの意味は、「偽の要素」または「偽装要素」です。実際、このように理解できます。疑似要素は実際には仮想要素です。要素は (コード形式では) 存在せず、文書内で見つけることもできないため、疑似要素は仮想要素です。
疑似要素はセレクターの最後に追加されるキーワードで、主に DOM ツリーにない要素を作成し、それらにスタイルを追加するために使用されます。
擬似要素を使用すると、要素の ID やクラス属性に頼ることなく、選択した要素の特定の部分のスタイルを定義できます。たとえば、擬似要素を使用して、段落の最初の文字のスタイルを設定したり、要素の前後にコンテンツを挿入したりできます。
CSS1 および CSS2 では、疑似要素の使用方法は疑似クラスと同じであり、コロン : がセレクターに接続されます。ただし、CSS3 では、疑似クラスと疑似要素を区別するために、疑似要素に対する単一コロンの使用が二重コロン :: に変更されました。したがって、疑似要素を使用する場合は、単一コロンではなく二重コロンを使用することをお勧めします。
selector::pseudo-element {
property: value;
}ログイン後にコピー
このうち、selectorはセレクター、pseudo-elementは擬似要素の名前、propertyはCSSにおける属性、valueは属性に対応する値です。
注: セレクター内で使用できる擬似要素は 1 つだけです。擬似要素はセレクターの後に続く必要があります。最新の W3C 仕様によれば、疑似クラスと疑似要素を区別するために、疑似要素を定義するときは単一コロン : ではなく二重コロン :: を使用する必要があります。ただし、古いバージョンの W3C 仕様では特別な区別がなかったので、ほとんどのブラウザは現在、擬似要素を定義するために単一コロンと二重コロンの両方のメソッドをサポートしています。
CSS は、次の表に示すように、一連の擬似要素を提供します。
| 擬似要素 | 例 | 説明の例 |
|---|
| ::after | p::after | 各 要素の後にコンテンツを挿入します |
##::before | p::before | 各 要素の前にコンテンツを挿入します
|
: :first -letter | p::first-letter | 各 要素のコンテンツの最初の文字と一致します
|
#::first -line | p::first-line | 各 要素のコンテンツの最初の行と一致します
|
::selection | p::selection | ユーザーが選択した要素の一部と一致します |
::placeholder | input::placeholder | 各フォーム入力ボックス ( など) のプレースホルダー属性と一致します。 |
1. ::after
伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。
下面通过一个示例来演示伪元素 ::after 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p.one::after {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.two::after {
content:"要插入的内容";
color: red;
font-size: 6px;
}
p.three::after {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="one">伪元素 ::after</p>
<p class="two">伪元素 ::after</p>
<p class="three">伪元素 ::after</p>
</body>
</html>ログイン後にコピー
运行结果如下图所示：
2. ::before
伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空""）。
下面通过一个示例来演示伪元素 ::before 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p.one::before {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.two::before {
content:"要插入的内容";
color: red;
font-size: 6px;
}
p.three::before {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="one">伪元素 ::before</p>
<p class="two">伪元素 ::before</p>
<p class="three">伪元素 ::before</p>
</body>
</html>ログイン後にコピー
运行结果如下图所示：
3. ::first-letter
伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 ::first-letter 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-letter 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter{
font-size: 2em;
color: blue;
}
</style>
</head>
<body>
<p>伪元素 ::first-letter</p>
</body>
</html>ログイン後にコピー
运行结果如下图所示：
4. ::first-line
伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-line 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line{
font-size: 1.5em;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p>伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。</p>
</body>
</html>ログイン後にコピー
运行结果如下图所示：
5. ::selection
伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。
下面通过示例来演示伪元素 ::selection 的使用：
<!DOCTYPE html>
<html>
<head>
<style>
p::selection{
color: red;
background-color: #CCC;
}
</style>
</head>
<body>
<p>伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。 </p>
</body>
</html>ログイン後にコピー
运行结果如下图所示：
6. ::placeholder
伪元素 ::placeholder 用来设置表单元素（、
