Before sets the width of the width:inherit result to exceed the width of the parent element

A div sets the width 15%, adding: the inherit, set by the before, width, but the actual width exceeds the width of the div
< div class= "aside-left" >
< / div >
< style type= "text/css" >

.
   .aside-left{
     width: 15%;
     float: left;
     background-color:blue;
   }
   .aside-left::before{
    content: "";
        width: inherit;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: inherit;
        border: inherit;
   }

</style>
.aside-left285.59:before288
Css
Mar.10,2021

add position: relative;

to .aside-left
.aside-left {
    position: relative;
    width: 15%;
    float: left;
    background-color:blue;
}

position: absolute is located relative to position attribute that is not static recent ancestor element. If it is positioned relative to .aside-left , you need to modify the position property.


aside-left width width:15% is calculated based on the width of its parent element
aside-left::before width width:inherit inherits aside-left to width:15%
also because aside-left::before is the position:absolute absolute positioning width is calculated based on the ancestor of the nearest relative positioning

the above problem is because the width of the two is 15% of the calculated body and 15% of the calculated html
, while the browser default style body {margin: 8px;}
, so the calculated width difference is 8x2x15% = 2.4

.
Menu