网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于CSS伪元素和Content属性的详细分析（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
继上篇深入了解CSS伪类选择器的用法（代码示例）记录完伪类后，我自然而然要向伪元素伸出“魔掌”的啦。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！
初识伪元素
?说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个class为.before和.after不是一样的吗？”
?其实使用伪元素::before和::after以下两个好处：
HTML的代码量减少，对SEO有帮助；
提高JavaScript查询元素的效率。
?那为什么会这两好处呢？原因就是伪元素并不存在于DOM中，而是位于CSSOM，HTML代码和DOM Tree中均没有它的身影，量少了自然效率有所提升。但这也引入一个问题——我们没办法通过JavaScript完全操控伪元素（我将在下面一节为大家讲述）
一大波伪元素来了
除了::before和::after外，别漏了以下的哦！
:first-line：只能用于块级元素。用于设置附属元素的第一个行内容的样式。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。
:first-letter：只能用于块级元素。用于设置附属元素的第一个字母的样式。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。
::selection：匹配选中部分的内容。可用的CSS属性为background,color。
有没有发现有的伪元素前缀是:有的却是::呢？::是CSS3的写法，其实除了::selection外，其他伪元素既两种前缀都是可以的，为兼容性可选择使用:，为容易区分伪元素和伪类则使用::，但我还是建议使用::来提高可读性，兼容性就让postcss等工具帮我们处理就好了。
::before和::after的注意事项
默认display: inline；
必须设置content属性，否则一切都是无用功；
默认user-select: none，就是::before和::after的内容无法被用户选中的；
伪元素和伪类结合使用形如：.target:hover::after。
JavaScript操作伪元素
?上文提到由于伪元素仅位于CSSOM中，因此我们仅能通过操作CSSOM API——window.getComputedStyle来读取伪元素的样式信息，注意：我们能做的就是读取，无法设置的哦！
{- window.getComputedStyle的类型 -}
data PseudoElement = ":before" 关键词：CSS伪元素与Content属性的详细区分（代码示例）