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 >

输出如下：

---