'Why doesn't width/height work with non positioned pseudo elements?

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>
htmlcsscss-positionjavaandroidandroid-softkeyboard


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions