CSS伪元素

CSS伪元素

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

CSS伪元素是用来添加一些选择器的特殊效果。

CSS伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素抽象，并不存在于文档中，所以称为伪元素。

比如设置元素的首字母、首行的样式；在元素的内容之前或之后插入内容。

语法

伪元素的语法：

   selector:pseudo-element{

property:value;

}

   选择器：伪元素{

属性：值;

}

CSS类也可以与伪元素配合使用：

   Selector.class:pseudo-element{

property:value;

}

选择器.类：伪元素{

属性：值;

}

常见的伪元素

伪元素

1. 单双冒号

     ::before/:before

     ::after/:after

     ::first-letter/:first-letter

     ::first-line/:first-line

1. 仅双冒号

::selection

::placeholder

::backdrop

常用伪元素

::after	p::after	在每个<p>元素之后插入内容
::before	p::before	在每个<p>元素之前插入内容
::first-letter	p::first-letter	选择每个<p>元素的首字母
::first-line	p::first-line	选择每个<p>元素的首行
::selection	p::selection	选择用户选择的元素部分

示例：