CSS伪元素用法解析和代码示例

伪元素：CSS中的伪元素用于在元素的指定部分添加样式。示例：在元素之前或之后使用样式。
语法如下：

selector::pseudo-element { property:value; }

伪元素的使用：以下是一些描述伪元素用法的示例。
::在伪元素之前：
用于在调用元素之前在元素之前添加一些CSS属性。
例子：

< html > < head > < title > before< / title > < style > h1::before { content: "Before element - "; } < / style > < / head > < body > < h1 > GFG< / h1 > < p > It is a paragraph.< / p > < p > This is another paragraph.< / p > < / body > < / html >

输出如下：

文章图片
::伪元素之后：
用于在调用元素后在元素后添加一些CSS属性。
例子：

< html > < head > < title > after< / title > < style > h1::after { content: " - after element"; } < / style > < / head > < body > < h1 > GFG< / h1 > < p > It is a paragraph.< / p > < p > This is another paragraph.< / p > < / body > < / html >

输出如下：

文章图片
::第一个字母的伪元素：
它用于更改元素的第一个字母。
例子：

< html > < head > < title > after< / title > < style > h1::first-letter { color: #ff0000; } < / style > < / head > < body > < h1 > GFG< / h1 > < p > It is a paragraph.< / p > < p > This is another paragraph.< / p > < / body > < / html >

输出如下：

文章图片
::第一行伪元素：
它用于更改元素的第一行。
例子：

< html > < head > < title > after< / title > < style > h1::first-line { color: #ff0000; } < / style > < / head > < body > < h1 > GFG< / h1 > < p > It is a paragraph.< / p > < p > This is another paragraph.< / p > < / body > < / html >

【CSS伪元素用法解析和代码示例】输出如下：