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

css google-chrome pseudo-element

13,626

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.

13,626

Author by

Gazillion

Updated on June 15, 2022

Comments

Gazillion about 2 years
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 seem to be working correctly.

Basically I have a repeating image as the background of the HTML element and then I add an absolute div positioned at the bottom with a solid black background.

I'd just like to point out that this is a learning experiment and not really how I'd achieve the same effect but what I'm trying is working in Firefox but not in Chrome!

Here's my CSS:
```
html {
    background-image: url('images/template/html-bg.jpg');
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #0e0e0e;
    height: 100%;
    position: relative;
}

html:before {
    content: "";
    display: block;
    background-color: #000;
    width: 100%;
    height: 138px;
    bottom: 0px;
    position: absolute;
}
```
In FF the page is rendered as I'd expect but in Chrome the whole page is black... Any ideas, am I doing this wrong?
Gazillion over 12 years

That's exactly what it is! I feel special having come across a Chrome bug :P Thanks for the help!
Mr Lister over 12 years

I don't believe it's a bug per se. Is HTML supposed to have "content" at all? HTML is the canvas. I wouldn't be surprised if a browser would implicitly slap display:none on all elements within a HTML element except <body>. Otherwise you'd always have some whitespace in the DOM tree above and below the body.
BoltClock over 12 years

@Mr Lister: Here's my take: html is the root element in the DOM. head and body are its children, both of which are also represented as DOM nodes. The :before and :after pseudo-elements describe inserting content before or after an element's document tree content, so they should work with the html element because its document tree content consists of the head and body elements. Like you said, html is the "canvas", where visual elements are drawn, and head does have an initial style of display: none anyway.
Mr Lister over 12 years

I can go with most of that, but not your punchline "head does have an initial style of display: none anyway." That cannot possibly be true, because the children of an element with display:none are never drawn, never! Here, "This behavior cannot be overridden by setting the 'display' property on the descendants." SeaMonkey's DOM Inspector also tells me that the HTML element of this page has display:block.
BoltClock over 12 years

@Mr Lister: So just set display: block on the head element too!