CODEWITHSUNDEEP
css
Henry
Henry

Reputation: 5313

Trying to remove bullets from this List in CSS

Here's my code:

ul.top-ten li:before {
    list-style-type: none;
    font-family: 'fontello';
    content: '\f08e';
    margin:0 5px 0 -15px;
    color: #ff9900;
}

I thought this line would strip the bullets away:

list-style-type: none;

However, no joy.

Here's the HTML:

  <ul class="top-ten">
    <li>Apples</li>
    <li>Pears</li>
    <li>Lemons</li>
    <li>Peaches</li>
  </ul>

So all good right? Apparently not...the bullets are still there...any idea why?

Upvotes: 0

Views: 163

Answers (3)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

add to your li tag list-style: none;

ul li{
   list-style: none;
}

Upvotes: 0

Bikram Jethi
Bikram Jethi

Reputation: 341

"list-style-type" property is applicable on the ul item type. I guess you are trying to add some content for each list item using the before pseudo selector. What you need to do move list-style-type: none; property to ul.top-ten selector.

ul.top-ten {
  list-style-type: none;
}

ul.top-ten li:before {
    font-family: 'fontello';
    content: '\f08e';
    margin:0 5px 0 -15px;
    color: #ff9900;
}

This should work fine.

Upvotes: 1

Mac_W
Mac_W

Reputation: 2987

Try this, list-style-type needs adding to ul not li (css-tricks)

ul.top-ten {
    list-style-type: none;
    font-family: 'fontello';
    content: '\f08e';
    margin:0 5px 0 -15px;
    color: #ff9900;
}

Upvotes: 1

Related Questions