Html 为什么'；使用非定位伪元素的t宽度/高度工作？

我想将之前的伪元素的宽度设置为80%。如果我使用定位，那么一切都会工作，但如果我不使用定位，那么一切都会失败

你能解释一下为什么没有定位，百分比宽度就不能工作吗？如果可以，请在规范中添加一些参考

.positioned{
位置：相对位置；
高度：15px；
背景颜色：海蓝宝石；
边缘底部：10px；
}
.定位：：之前{
位置：绝对位置；
内容：“；
背景：红色；
宽度：80%；
身高：100%；
}
.未定位{
高度：15px；
背景颜色：海蓝宝石；
边缘底部：10px；
}
.未定位：：之前{
内容：“；
背景：红色；
宽度：80%；
身高：100%；
}

---

首先，这与百分比值无关。即使使用像素值，宽度和高度都不起作用，也会得到相同的结果

伪元素是内联的元素，其宽度/高度仅由其内容定义，CSS设置的宽度/高度将被忽略

在CSS中，

：：before

创建一个伪元素，它是所选元素的第一个子元素。它通常用于向具有content属性的元素添加示意性内容默认情况下它是内联的。

宽度

此属性不适用于未替换的内联元素。未替换内联元素框的内容宽度是框内呈现内容的宽度

“高度”属性不适用。内容区域的高度应基于字体

---

通过制作伪元素<代码>位置：绝对< /代码>，现在将考虑适用于计算宽度和高度的规则。您还将注意到，元素在显示中的计算值为

block

您还应注意使用定位元素，这意味着相对、绝对、固定或粘滞，但使元素

position:relative

将保持其为内联级别元素，并且仍然不能使用宽度/高度

.positioned{
位置：相对位置；
高度：15px；
背景颜色：海蓝宝石；
边缘底部：10px；
}
.定位：：之前{
位置：相对位置；
内容：“；
背景：红色；
宽度：80%；
身高：100%；
}
.未定位{
高度：15px；
背景颜色：海蓝宝石；
边缘底部：10px；
}
.未定位：：之前{
内容：“；
背景：红色；
宽度：80%；
身高：100%；
}

width/height对内联元素不起作用，将元素定位将使其成为块element@TemaniAfif谢谢，这正是我需要的。你可以加上你的答案，我会接受的