每个开发者都应该知道的 CSS 伪元素(Pseudo Element)
伪元素被用于选择样式，并被应用于DOM中的特定元素或部分元素。
什么是伪元素(Pseudo Element)?
伪元素被用于选择样式，并被应用于DOM中的特定元素或部分元素。
伪元素（Pseudo-elements） 由 ( :: ) 符号表示。
多个伪元素能被用于单个元素。
selector::pseudo-element { property: value; }
下面展示一个例子：
伪元素（Pseudo-elements） 能够帮助将样式应用于HTML元素的第一个字母或者第一行。
这儿有六种伪元素，让我们用一个例子来看看每一个伪元素吧。
1) ::first-line
::first-line 伪元素有助于选择样式并将样式应用于文本、段落和标题的第一行。
对于::first-line 这个元素，我们只能将其应用于这些属性：font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height 和 clear。
注意::first-line 这个伪元素仅适用于块级元素。
来个例子吧：
HTML
CSS
p::first-line { color: green; }
2) ::first-letter
::first-letter 伪元素有助于选择和应用样式到文本和段落和标题的第一个字母。
对于::first-letter 这个元素，我们只能将其应用于这些属性：font,color,background,margin,padding,border,text-decoration,vertical-align (only if “float” is “none”),text-transform,line-height,float 和 clear。
举个小栗子（example）:
HTML
CSS
p::first-letter { color: red;
font-size: 18px; }
3) ::before
::before 伪元素有助于在元素的内容之前添加或插入内容。
例子:
HTML
CSS
p::before { content: url(smiley.gif); }
4) ::after
::after 伪元素有助于在元素的内容之后添加或插入内容。
例:
HTML
CSS
p::after { content: url(smiley.gif); }
5) ::marker
::marker 伪元素有助于将样式应用于order属性和取消order属性列表。
Example:
HTML
- Attractive Aurora
- Attractive
- Aurora
CSS
::marker { color: red; }
6) ::selection
::selection 伪元素有助于将样式应用于用户选择的文本。
::selection 伪元素接受最少数量的 CSS 属性。
::selection 伪元素支持colors,background,outline 和 cursor.。
例:
HTML
CSS
::selection { color: red; background: yellow; }
我认为这篇文章可能对你有用：
感谢阅读，别忘了评论和分享哦~
