CODEWITHSUNDEEP
htmlcss
SBel
SBel

Reputation: 3359

Understanding the content rule in the :before

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>

Upvotes: 1

Views: 44

Answers (3)

George
George

Reputation: 36784

Because the :before pseudo element is displayed inline by default. Change that, and you'll see your square:

.a:before {
    display:block;
}

http://jsfiddle.net/oGeez/Va67f/

Upvotes: 5

Matthew.Lothian
Matthew.Lothian

Reputation: 2072

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.

Upvotes: 0

tiny sauce
tiny sauce

Reputation: 146

You have to set the display property to block to display element

jsFiddle here

Upvotes: 0

Related Questions