CSS伪元素

伪类可以定义为关键字，该关键字将与选择器结合在一起，该选择器定义所选元素的特殊状态。与伪类不同，伪元素用于设置元素的特定部分的样式，而伪类用于设置元素的样式。

例如，伪元素可用于为元素的第一个字母或第一行设置样式。伪元素还可以用于在元素之后或元素之前插入内容。

句法

伪元素具有以下简单语法：

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

我们在语法中使用了双冒号(:: pseudo-element)。在CSS3中，双冒号代替了伪元素的单冒号表示法。 W3C试图区分伪元素和伪类。因此，建议使用双冒号(:: pseudo-element)而不是单冒号(:)。

在CSS1和CSS2中，伪元素和伪类都使用单个冒号(:)语法。单个冒号语法对于CSS1和CSS2中的伪元素有效，以实现向后兼容。

尽管有几个CSS伪元素，但我们正在讨论一些最常用的元素。广泛使用的CSS伪元素列表如下：

让我们讨论上面的伪元素以及一个示例。

:: first-letter伪元素

顾名思义，它会影响文本的第一个字母。它只能应用于块级元素。它不支持所有CSS属性，而是支持下面提供的某些CSS属性。

• 颜色属性(例如颜色)
• 字体属性(例如font-style，font-family，font-size，font-color等) 。
• 边距属性(例如，margin-top，margin-right，margin-bottom和margin-left) 。
• 边框属性(例如border-top，border-right，border-bottom，border-left，border-color，border-width等) 。
• 填充属性(例如padding-top，padding-right，padding-bottom和padding-left) 。
• 背景属性(例如background-color，background-repeat，background-image和background-position) 。
• 与文本相关的属性(例如，文本阴影，文本转换，文本装饰等) 。
• 其他属性是垂直对齐(仅当float为' none '时)字距，行高，行距等。

例

 
 
     
 
 
    
 Welcome to the javaTpoint.com 
 
    
 This is an example of ::first-letter pseudo-element. 
 

输出量

:: first-line伪元素

它类似于:: first-letter伪元素，但会影响整行。它将特殊效果添加到文本的第一行。它支持以下CSS属性：

• 颜色属性(例如颜色)
• 字体属性(例如font-style，font-family，font-size，font-color等) 。
• 背景属性(例如background-color，background-repeat，background-image和background-position) 。
• 其他属性包括单词间距，字母间距，行高，垂直对齐，文本转换，文本装饰。

例

在此示例中，我们将看到使用:: first-line元素向该元素的第一行添加特殊效果。

 
 
     
 
 
    
 Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is committed to provide easy and in-depth tutorials on various technologies. 
 
    
 This is an example of ::first-line pseudo-element. 
 

输出量

:: before伪元素

它允许我们在元素的内容之前添加一些内容。它用于在元素的特定部分之前添加内容。通常，它与content属性一起使用。

我们还可以使用该伪元素在内容之前添加常规字符串或图像。

例

 
 
     
 
 
    
Welcome to the javaTpoint.com. 
 
    
 This is an example of ::before pseudo-element. 
    
 In the first line the "Hello World" has added by using the pseudo-element ::before 
 

输出量

:: after伪元素

它的工作方式与:: before伪元素类似，但它将内容插入到元素的内容之后。它用于在元素的特定部分之后添加内容。通常，它与content属性一起使用。

它还允许我们在内容后添加常规字符串或图像。

例

 
 
     
 
 
    
 Hello World. 
 
    
 This is an example of ::after pseudo-element. 
    
 In the first line the "Welcome to the javaTpoint.com." has added by using the pseudo-element ::after 
 

输出量

:: selection伪元素

它用于设置用户选择的元素部分的样式。我们可以使用以下CSS属性：

• 颜色。
• 背景颜色。
• 其他属性包括光标，轮廓等。

例

 
 
     
 
 
    
 Hello World. 
 
    
 Select the text in first line to see the effect. 
    
 This is an example of ::selection pseudo-element. 
     

输出量

CSS类和伪元素

伪元素可以与CSS类结合使用，以对具有该类的特定元素进行样式设置。下面给出了将CSS类与伪元素组合在一起的语法。

句法

它可以写成：

selector.class::pseudo-element {
property: value
}

例

这个例子会影响那些的首字母

具有class =“ example”而不是全部影响的元素

元素。

 
 
     
 
 
    
 Hello World. 
 
    
 Welcome to the javaTpoint.com. 
 
    
 This is an example of pseudo-element with CSS classes.
     

输出量