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

by

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.

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.

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

width

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

The ‘height’ property does not apply. The height of the content area should be based on the font … ref

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.

enter image description here

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>

More Related Contents:

  1. How to center a “position: absolute” element
  2. ‘transform3d’ not working with position: fixed children
  3. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  4. How does the “position: sticky;” property work?
  5. Why does position:relative; appear to change the z-index?
  6. Why do absolute elements stack up on each other instead of stacking one after the other?
  7. Absolute position is not working
  8. Position: sticky buttons not working in IE 11
  9. ‘position: sticky’ not working when ‘height’ is defined
  10. Center aligning a fixed position div
  11. Position absolute and overflow hidden
  12. Absolute positioning inside absolute position
  13. How to make div’s percentage width relative to parent div and not viewport
  14. Why is an element with position: fixed moving with a non-positioned sibling?
  15. Why isn’t my margin working with position: fixed?
  16. Position fixed doesn’t work when using -webkit-transform
  17. body { overflow-x: hidden; } breaks position: sticky
  18. Why using absolute position causes the div to be on top?
  19. sticky position on css grid items
  20. How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
  21. How to work with ellipsis in bootstrap responsive table
  22. flex-grow not sizing flex items as expected
  23. How to display an unordered list in two columns?
  24. Difference in applying CSS to html, body, and the universal selector *?
  25. Transform: translate(-50%, -50%)
  26. How to create a curve between two gradient using CSS?
  27. How to set placeholder value using CSS?
  28. CSS Rounded corners
  29. Fixed footer in Bootstrap
  30. CSS On hover show another element

Leave a Comment