在CSS中,使用:before伪元素可以在已有元素的内容前插入内容,但是在一些情况下这个伪元素可能对某些元素无效,比如对于元素。 我们可以通过以下代码来插入:before伪元素内容: p::befor...
在CSS中,使用:before伪元素可以在已有元素的内容前插入内容,但是在一些情况下这个伪元素可能对某些元素无效,比如对于元素。
我们可以通过以下代码来插入:before伪元素内容: 元素的内容前插入"before content"的内容。但是,如果我们将元素替换为 元素,我们会发现在这种情况下伪元素对该元素无效。
例如,我们有以下代码:
这个代码表示将在每个p::before {
content: "before content";
}
上述代码的结果是没有任何变化,":before"伪元素并没有对元素有效。这是因为必须对带有文本的元素(如段落、标题等)使用伪元素才能生效。对于内联元素(如元素),需要首先将其转换为块级元素(如p::before {
content: "before content";
}
<span>Hello World</span>
上述代码表示将元素转换为块级元素。这样我们就可以在:before伪元素中使用它了。
在以下示例中,我们将用上述代码转换元素为块级元素,并在:before伪元素中插入内容: span {
display: block;
}
上述代码的结果是在Hello World前面插入了"before content"的内容。
总之,我们可以通过:before伪元素在元素前插入内容,但它可能对某些元素无效,如内联元素元素。我们需要将其转换为块级元素(如span {
display: block;
}
span::before {
content: "before content";
}
<span>Hello World</span>