:before and :after pseudo elements on html tag is wonky in Chrome

Question

I\'m trying to learn how to use the :before and :after pseudo elements. I\'m trying to add a black background to the bottom of the page as a sticky footer but it doesn\'t se

Answer 1

Your CSS should work as expected, as your pseudo-element should be drawn in the context of the initial containing block (the viewport, represented by the html element) anyway, which is exactly what Firefox is doing.

Your particular issue was reported as a Chrome bug, but it hasn't been addressed. As a workaround, you can apply your pseudo-element to body instead:

body:before {
    content: "";
    display: block;
    background-color: #000;
    width: 100%;
    height: 138px;
    bottom: 0px;
    position: absolute;
}

Depending on your layout, you may need to either keep your html rule or change it to body as well.