CODEWITHSUNDEEP
htmlcsspseudo-elementcss-content
Jerry Jones
Jerry Jones

Reputation: 796

Text not showing when combined with pseudo-element on li:before

I have a menu using <li>. The example code is as follows:

HTML:

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
</ul>

CSS:

li{
    width:190px;
    height:40px;
    padding:3px 10px 3px 50px;  
    border-bottom:1px dotted #003366;
    cursor:pointer;
    line-height:40px;
    background-color: #FFFFFF;
    list-style:none;
    font-weight:bold;                       
    position:relative;
}

li:before{
    content:'';
    position:absolute;
    width:195px;
    height:38px;
    left:50px;
    top:3px;
    background-color: #F9F9F9;
    border:1px solid #CFCFCF;
}

When not using the style li:before the text in <li> will be visible (i.e "Menu 1", "Menu 2") but when used this pseudo-class li:before it disappears.

Upvotes: 2

Views: 3227

Answers (1)

James Donnelly
James Donnelly

Reputation: 128776

Firstly, these are pseudo-elements, not pseudo-classes.

That's due to your positioning.

Your li element has 50px left padding and 3px top padding.

Your li:before pseudo-element has a 50px left offset and a 3px top offset.

This means that your li:before pseudo-element is positioned directly on top of your li.

You're then giving it a solid background colour, effectively hiding anything beneath it.

Here's a demo showing this more clearly using a p element and p:before pseudo-element. I've given the pseudo-element some opacity to show how it covers the p element.

Upvotes: 5

Related Questions