div { width: 100px; height: 100px; background: red; } div:before { content: ""; width: 100px; height:30px; background: yellow; } Why isn't the before pseudo element showed above the div element when the position values (relative and absolute respectively) are not set?
The ::before and ::after pseudo-elements are display:inline by default, which width and height will not affect.
You can set the pseudo-element to display:block.
div { width: 100px; height: 100px; background: red; } div:before { content: ""; display: block; width: 100px; height: 30px; background: yellow; }<div></div>Also see What is the default display property of the :before and :after pseudo-elements?
The default display property of both :before and :after is inline, so your width and height declarations have no effect. Change it to block and bob's your uncle:
div { width: 100px; height: 100px; background: red; } div:before { content: ""; display: block; width: 100px; height: 30px; background: yellow; }<div></div>You forgot to add position:absolute
div { width: 100px; height: 100px; background: red; } div:before { content: ""; width: 100px; height:30px; background: yellow; position: absolute; }<div></div>
z-index relative to their parent element, rather than <html>. They will always appear 'behind' unless you override that behavior.
z-index doesn't appear to be the case. Can you refer to any documentation?content has no value though you could also set display: block for similar results. Typically though these pseudo elements require additional positioning (as borders, offsets, etc) so position:absolute is more commonly used in my experience.