Css 为什么：before和：after伪元素需要一个'；内容'；财产？_Css_Pseudo Element_Css Content

Css 为什么：before和：after伪元素需要一个'；内容'；财产？

css

Css 为什么：before和：after伪元素需要一个'；内容'；财产？,css,pseudo-element,css-content,Css,Pseudo Element,Css Content,鉴于以下场景，为什么：after选择器需要内容属性才能正常工作 .test{ 宽度：20px；高度：20px；背景：蓝色；位置：相对位置； } .测试：之后{ 宽度：20px；高度：20px；背景：红色；显示：块；位置：绝对位置；顶部：0px；左：20px； } 除非添加内容：…，否则psuedo元素实际上并不存在设置其他样式属性不足以强制浏览器创建元素。除非添加内容：…，否则psuedo元素实际上不存在设置其他样式属性不足以强制浏览器创建元素。以下是对各种W3C规范和草

鉴于以下场景，为什么

：after

选择器需要内容属性才能正常工作

.test{
宽度：20px；
高度：20px；
背景：蓝色；
位置：相对位置；
}
.测试：之后{
宽度：20px；
高度：20px；
背景：红色；
显示：块；
位置：绝对位置；
顶部：0px；
左：20px；
}

除非添加

内容：…

，否则psuedo元素实际上并不存在

设置其他样式属性不足以强制浏览器创建元素。

除非添加

内容：…

，否则psuedo元素实际上不存在

设置其他样式属性不足以强制浏览器创建元素。

以下是对各种W3C规范和草案的一些参考：

可以使用

：before

和

：after

伪元素在元素内容之前或之后插入生成的内容

作者使用

：before

和

：after

伪元素指定生成内容的样式和位置。正如它们的名称所示，

：before

和

：after

伪元素指定元素文档树内容前后的内容位置与这些伪元素一起使用的
content
属性指定插入的内容。

首字母：无
此属性与
：before
和
：after
伪元素一起使用，以生成文档中的内容。值具有以下含义：
none-不生成伪元素。

应用于
：：before
和
：：after
伪元素的样式会影响生成内容的显示。
content
属性就是这个生成的内容，如果不存在该属性，则假定默认值为
content:none
，这意味着没有要应用的样式
如果不想重复
内容：“”：：before
和：：after 伪元素的样式，就可以覆盖这一点：：：之前，：：之后{ 内容：''； } 以下是对各种W3C规范和草案的一些参考：可以使用：before 和：after 伪元素在元素内容之前或之后插入生成的内容作者使用：before 和：after 伪元素指定生成内容的样式和位置。正如它们的名称所示，：before 和：after 伪元素指定元素文档树内容前后的内容位置与这些伪元素一起使用的content 属性指定插入的内容。首字母：无此属性与：before 和：after 伪元素一起使用，以生成文档中的内容。值具有以下含义： none-不生成伪元素。应用于：：before 和：：after 伪元素的样式会影响生成内容的显示。content 属性就是这个生成的内容，如果不存在该属性，则假定默认值为content:none ，这意味着没有要应用的样式如果不想重复内容：“”：：before 和：：after 伪元素的样式，就可以覆盖这一点：：：之前，：：之后{ 内容：''； } 根据您对他人答案的评论，我相信您的问题实际上是：为什么必须在CSS中设置伪类的content属性与非伪类的内容相反，可以在 HTML还是CSS 原因是：根据定义，为页面的HTML标记指定的每个元素动态创建伪类所有页面元素（包括伪类）都必须具有要显示的内容属性像这样的HTML元素也可以，但是您可以使用标记（或带有CSS声明的）快速设置它们的内容属性然而，与非伪类元素不同，伪类不能在标记本身中给定值。 ∴ 因此，所有伪类都是不可见的（它们的“内容”属性没有值），除非您告诉它们不要（通过CSS声明赋予它们值）以这个简单的页面为例： <body> </body> 或者，我们可以通过设置CSS中元素的内容属性来显示元素：将字符串注入元素的这两种方法是相同的现在，考虑用伪类做同样的事情： HTML: <body> P </body> CSS: p:before { content: "BEFORE... " ; } p:after { content: " ...and AFTER"; } 最后，想象一下，如果不使用CSS，您将如何完成这个示例。这是不可能的，因为无法在HTML标记中设置伪类的内容你可能很有创意，想象这样的事情可能会奏效： <p:before>BEFORE... P <p:after> ...and AFTER 在 p …之后但是，它不是，因为和不是HTML元素总之：每个标记元素都存在伪类默认情况下，它们是不可见的，因为它们初始化时没有内容属性不能为伪类w设置内容属性 p { content: "This sentence is the content of the p element set in the CSS."; } HTML: <body> P </body> CSS: p:before { content: "BEFORE... " ; } p:after { content: " ...and AFTER"; } BEFORE... P ...and AFTER <p:before>BEFORE... P <p:after> ...and AFTER