CSS |伪元素

CSS 伪元素是添加到选择器的关键字，可让您设置所选元素的特定部分的样式。例如，样式化元素的第一个字母或行，

在元素内容之前或之后插入内容。所有这些都可以使用 CSS 中的伪元素来完成。

请注意，与伪元素相比，伪类可用于根据元素的状态设置元素的样式。

句法：

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

CSS 中有很多伪元素，但最常用的如下：

• ::first-line 伪元素将样式应用于块级元素的第一行。请注意，第一行的长度取决于许多因素，包括元素的宽度、文档的宽度和文本的字体大小。请注意，只有少数属性应用于第一行伪元素，如字体属性、颜色属性、背景属性、字间距、字母间距、文本装饰、垂直对齐、文本变换、行高、清除， 等等。

例子：

HTML

    
    


    
Geeks For Geeks
    
::first-line element
     
This is a paragraph using first-line pseudo-element
      to style first line of the paragarph.Content in the
      first line turns red and becomes bold.
 

输出：

• ::first-letter 伪元素将样式应用于块级元素第一行的第一个字母，但仅限于前面没有其他内容（例如图像或内联表格）的情况。请注意，只有少数属性应用于第一行伪元素，如字体属性、颜色属性、背景属性、字间距、字母间距、文本装饰、垂直对齐、文本变换、行高、清除， 等等。

例子：

HTML

    
    


    
Geeks For Geeks
    
::first-letter element
     
This is a paragraph using first-letter pseudo-element
      to style first letter of the paragarph.first-letter element
      turned the first letter of this paragrapht to red
      and made it bold.
 

输出：

• :: before Pseudo-element创建一个伪元素，它是被选元素的第一个子元素。它通常用于向具有 content 属性的元素添加装饰性内容。默认情况下它是内联的。

例子：

HTML

    
    


    
Geeks For Geeks
    
::before element
     
This is a paragraph to which we added red color quotation marks
      using ::before element.
 

输出：

• ::after Pseudo-element创建一个伪元素，它是所选元素的最后一个子元素。它通常用于向具有 content 属性的元素添加装饰性内容。默认情况下它是内联的。

例子：

HTML

    
    


    
Geeks For Geeks
    
::after element
     
This is a paragraph to which we added red color quotation marks
      using ::after element.
 

输出：

• ::marker 伪元素选择列表项的标记框，通常包含项目符号或数字。它适用于任何设置为显示的元素或伪元素：列表项，例如
• 和
  元素。

例子：

HTML

    
    


    
Geeks For Geeks
    
::marker element
    

        
HTML
        
CSS
        
JavaScript
    

输出：

• ::selection 伪元素将样式应用于文档中已被用户突出显示的部分，例如在文本上单击和拖动鼠标。

例子：

HTML

    
    


    
Geeks For Geeks
    
::selection element
     
Content in this paragraph turns red with
      green background on selection.
 
    As this is not a paragraph, you can notice red
      background and green text on selection.

输出：