How come the :before doesn't show anything when the content is empty, even though I set the height and width but when I enter some text in the content it shows that text?
CSS:
.a { background-color: cyan; height: 300px; width: 200px; margin-left: 50px; } .a:before { /* This is the one that I change */ content: "test"; margin-left: -10px; background-color: red; height: 10px; width: 10px; } HTML:
<div class="a"></div> Because the :before pseudo element is displayed inline by default. Change that, and you'll see your square:
.a:before { display:block; } You have to set the display property to block to display element
https://developer.mozilla.org/en-US/docs/Web/CSS/content
Have a look at the values and results for the content property.
"none: The pseudo-element is not generated"
Else the psudo elements display is inline. In your case I would use. Content: " " and display block.
Sorry. Formatting on my phone.
