How to Get Rid of Bullet Points in CSS
Ferenc Almasi • 2022 September 13 •
2 min read
Add a list-style-type: none to your unordered list to get rid of bullet points in CSS.
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:
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:
@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.
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
CSS - The Complete Guide (including Flexbox, Grid and Sass)
The HTML & CSS Bootcamp
The Creative HTML5 & CSS3 Course
Recommended
How to Create a Configurable Tabs Component in React
11 min read • React v18.2
How to Create a Responsive Timeline Component in React
10 min read • React v18.2
How to Create Dynamic Routes in Astro
9 min read