为什么宽度/高度不适用于未定位的伪元素? [英] Why doesn't width/height work with non positioned pseudo elements?

问题描述

我想将 :: before 伪元素的 width 设置为80％.如果我使用定位，则一切正常，但是如果我不使用定位，则一切都会失败.

I want to set a width of ::before pseudo-element to 80%. If I use positioning then everything works, but if I don't use it then everything fails.

您能解释一下为什么没有定位时百分比宽度不起作用吗?如果可以的话，请添加一些对该规范的引用

Could you explain me why percentage width doesn't work without positioning? If you can please add some references to the specification

.positioned {
    position: relative;
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.positioned::before {
    position: absolute;
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

.not-positioned {
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.not-positioned::before {
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

<div class="positioned"></div>
<div class="not-positioned"></div>

推荐答案

首先，它与百分比值无关.即使使用像素值，宽度和高度都无效，您也会得到相同的结果.

First, it's not about percentage values. You will have the same result even with pixel values and both width and height aren't working.

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

Pseudo elements are inline elements and their width/height is only defined by their content and the width/height set with CSS will be ignored.

在CSS中，::before创建一个伪元素，该元素是所选元素的第一个子元素.它通常用于将化妆品内容添加到具有content属性的元素. 默认情况下是内联的.

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. ^ref

宽度

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

This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them ^ref

"height"属性不适用.内容区域的高度应基于字体...

---

通过制作伪元素position:absolute，您现在将考虑适用于

---

By making the pseudo element position:absolute you will now consider the rules that applies to Absolutely positioned element in order to calculate width and height. You will also notice that the element will have a computed value of block within display.

您还应注意使用 positioned元素，这意味着相对，绝对，固定或粘性BUT都会使元素position:relative保持为内联级别元素，并且您仍然无法使用宽度/高度.

You should also pay attention to the use of positioned element which means either relative, absolute, fixed or sticky BUT making the element position:relative will keep it an inline level element and you still cannot use width/height.

.positioned {
    position: relative;
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.positioned::before {
    position: relative;
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

.not-positioned {
    height: 15px;
    background-color: aquamarine;
    margin-bottom: 10px;
}
.not-positioned::before {
    content: "";
    background: red;
    width: 80%;
    height: 100%;
}

<div class="positioned"></div>
<div class="not-positioned"></div>

这就是说，如果您想获得相同的视觉效果，则可以通过考虑渐变来简化代码:

This said, you can simplify you code by considering gradient if you want to achieve the same visual:

.positioned {
  position: relative;
  height: 15px;
  background:
   linear-gradient(red,red) left/80% 100% no-repeat,
   aquamarine;
  margin-bottom: 10px;
}

<div class="positioned"></div>

这篇关于为什么宽度/高度不适用于未定位的伪元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！