πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.

How to Get Rid of Bullet Points in CSS

Ferenc Almasi β€’ 2022 September 13 β€’ Read time 2 min read
  • twitter
  • facebook
CSS

Add a list-style-type: none to your unordered list to get rid of bullet points in CSS.

Copied to clipboard!
ul, ol {
    list-style-type: none;
}

The list-style-type property can take on multiple values. To demonstrate the differences between each value, take a look at the following example:

  • list-style-type set to:
  • none
  • list-style-type set to:
  • circle
  • list-style-type set to:
  • disclosure-closed
  • list-style-type set to:
  • armenian

You could also set list-style: none, which is a shorthand property for list-style-image, list-style-position, and list-style-type that we used in the above examples. It has the same effect as setting list-style-type, but you also have the ability to set the other two with this one rule. You can find the full list of supported values below:

Copied to clipboard! Playground
list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: cjk-decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: lower-alpha;
list-style-type: lower-latin;
list-style-type: upper-alpha;
list-style-type: upper-latin;
list-style-type: arabic-indic;
list-style-type: armenian;
list-style-type: bengali;
list-style-type: cambodian;
list-style-type: khmer;
list-style-type: cjk-earthly-branch;
list-style-type: cjk-heavenly-stem;
list-style-type: cjk-ideographic;
list-style-type: devanagari;
list-style-type: ethiopic-numeric;
list-style-type: georgian;
list-style-type: gujarati;
list-style-type: gurmukhi;
list-style-type: hebrew;
list-style-type: hiragana;
list-style-type: hiragana-iroha;
list-style-type: japanese-formal;
list-style-type: japanese-informal;
list-style-type: katakana;
list-style-type: katakana-iroha;
list-style-type: korean-hangul-formal;
list-style-type: korean-hanja-formal;
list-style-type: korean-hanja-informal;
list-style-type: lao;
list-style-type: lower-armenian;
list-style-type: malayalam;
list-style-type: mongolian;
list-style-type: myanmar;
list-style-type: oriya;
list-style-type: persian;
list-style-type: simp-chinese-formal;
list-style-type: simp-chinese-informal;
list-style-type: tamil;
list-style-type: telugu;
list-style-type: thai;
list-style-type: tibetan;
list-style-type: trad-chinese-formal;
list-style-type: trad-chinese-informal;
list-style-type: upper-armenian;
list-style-type: disclosure-open;
list-style-type: diclosure-closed;

How to Set Custom Bullet Points

You can also set custom bullet points in CSS using the @counter-style at-rule. For example, the following at-rule will create emoji thumbs up for list elements:

Copied to clipboard! Playground
@counter-style thumbs {
    system: cyclic;
    symbols: "πŸ‘";
    suffix: " ";
}

@counter-style fruits {
    system: cyclic;
    symbols: πŸ₯ πŸ“ 🍊;
    suffix: " ";
}

ul {
    list-style-type: thumbs;
    list-style-type: fruits;
}
  • one
  • two
  • three
  • Kiwi
  • Strawberry
  • Tangerine

Notice that in the second example, the symbols are not between quotes, otherwise, we would display all three icons for each individual element. You can also change the system from cyclic to fixed, in which case, only the first three elements will have custom icons, and the rest will fall back to the default style.

Using cyclic on the other hand will cycle through the symbols, meaning that the fourth element in the above example gets a kiwi, the fifth a strawberry, and so on.

  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.