Customize list item bullets using CSS

Question

Is it possible to change the size of an  lt li gt  element s bullet   Take a look at the code below   li       list-style  square     I want to change the size of this squared bullet       I can t seem to find any way to achieve that

User · Answer

You can wrap the contents of the li in another element such as a span  Then  give the li a larger font-size  and set a normal font-size back on the span   http   jsfiddle net RZr2r   li       font-size  36px    li span       font-size  18px     lt ul gt       lt li gt  lt span gt Item 1 lt  span gt  lt  li gt       lt li gt  lt span gt Item 2 lt  span gt  lt  li gt       lt li gt  lt span gt Item 3 lt  span gt  lt  li gt   lt  ul gt

User · Answer

Depending on the level of IE support needed  you could also use the  before selector with the bullet style set as the content property   li       list-style-type  none    font-size  small     li before     content    2022     font-size  x-large      You may have to look up the HTML ASCII for the bullet style you want and use a converter for CSS Hex value

User · Answer

You mean altering the size of the bullet  I assume  I believe this is tied to the font-size of the li tag  Thus  you can blow up the font-size for the LI  then reduce it for an element contained inside  Kind of sucks to add the extra markup - but something like   li  font-size omgHuge   li span  font-size mehNormal     Alternately  you can specify an image file for your list bullets  that could be as big as you want   ul    list-style  square url  38specialPlusP gif         See  http   www w3schools com css css list asp

User · Answer

You have to use an image to change the actual size or form of the bullet itself   You can use a background image with appropriate padding to nudge content so it doesn t overlap   list-style-image url bigger gif     or  background-image  url images bullet gif

User · Answer

In case you do not want to wrap the content in your  lt li gt s with  lt span gt s  you can also use  before like this   ul     list-style  none      li     position  relative    padding-left  15px    line-height  16px    li before     content    2022     line-height  16px    match the li line-height for vertical centered bullets     position  absolute    left  0    li huge before     font-size  30px     li small before     font-size  10px      Adjust your font sizes on the  before to whatever you would like    lt ul gt     lt li class  huge  gt huge bullet lt  li gt     lt li class  small  gt smaller bullet lt  li gt     lt li class  huge  gt multi line item with custom lt br  gt  sized bullet lt  li gt     lt li gt normal bullet lt  li gt   lt  ul gt

User · Answer

This method moves the disc out of the text flow where the original disc was  but is adjustable  ul      list-style-type  none           li           position  relative              li before           position  absolute          top   1rem          left  - 8em          content    2022           font-size  1 2rem

User · Answer

If you wrap your  lt li gt  content in a  lt span gt  or other tag  you may change the font size of the  lt li gt   which will change the size of the bullet  then reset the content of the  lt li gt  to its original size  You may use em units to resize the  lt li gt  bullet proportionally   For example    lt ul gt       lt li gt  lt span gt First item lt  span gt  lt  li gt       lt li gt  lt span gt Second item lt  span gt  lt  li gt   lt  ul gt    Then CSS   li       list-style-type  disc      font-size  0 8em     li         font-size  initial      A more complex example    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt title gt List Item Bullet Size lt  title gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt style gt  ul disc li       list-style-type  disc      font-size  1 5em     ul square li       list-style-type  square      font-size  0 8em     li         font-size  initial         lt  style gt   lt  head gt   lt body gt    lt h1 gt First lt  h1 gt   lt ul class  disc  gt       lt li gt  lt span gt First item lt  span gt  lt  li gt       lt li gt  lt span gt Second item lt  span gt  lt  li gt   lt  ul gt    lt h1 gt Second lt  h1 gt   lt ul class  square  gt       lt li gt  lt span gt First item lt  span gt  lt  li gt       lt li gt  lt span gt Second item lt  span gt  lt  li gt   lt  ul gt    lt  body gt   lt  html gt    Results in

User · Answer

I just found a solution that I think works really well and gets around all of the pitfalls of custom symbols  The main problem with the li before solution is that if list-items are longer than one line will not indent properly after the first line of text  By using text-indent with a negative padding we can circumvent that problem and have all the lines aligned properly   ul      padding-left  0     remove default padding    li      list-style-type  none      remove default styles     padding-left  1 2em          text-indent -1 2em         remove padding on first line    li  before      margin-right      0 5em       width             0 7em     margin-right and width must add up to the negative indent-value set above     height            0 7em       display           inline-block      vertical-align    middle      border-radius  50       background-color  orange      content

User · Answer

I assume you mean the size of the bullet at the start of each list item  If that s the case  you can use an image instead of it   list-style-image url  bigger gif    list-style-type none    If you meant the actual size of the li element  then you can change that as normal with width and height

User · Answer

Another way of changing the size of the bullets would be    Disabling the bullets altogether Re-adding the custom bullets with the help of   before pseudo-element    Example    x000D   x000D  ul   x000D    list-style-type  none  x000D    x000D   x000D  li  before   x000D    display           inline-block  x000D    vertical-align    middle  x000D    width             5px  x000D    height            5px  x000D    background-color   000000  x000D    margin-right      8px  x000D    content               x000D    x000D   lt ul gt  x000D     lt li gt first element lt  li gt  x000D     lt li gt second element lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    No markup changes needed

User · Answer

lt ul gt       lt li id  bigger  gt  lt  li gt       lt li gt  lt  li gt       lt li gt  lt  li gt     lt  ul gt      lt style gt        bigger  li  height   px  width   px      lt  style gt

User · Answer

Based on  dzimney answer and similar to  Crisman answer  but different   That answer is good but has indention problem  bullets appear inside of li scope   Probably you don t want this  See simple example list below  this is a default HTML list     Lorem ipsum dolor sit amet  ei cum offendit partiendo iudicabit  At mei quaestio honestatis  duo dicit affert persecuti ei  Etiam nusquam cu his  nec alterum posidonium philosophia te  Nec an purto iudicabit  no vix quod clita expetendis  Quem suscipiantur no eos  sed impedit explicari ea  falli inermis comprehensam est in  Vide dicunt ancillae cum te  habeo delenit deserunt mei in  Tale sint ex his  ipsum essent appellantur et cum    But if you use the mentioned answer the list will be like below  ignoring the size of the bullets        Lorem ipsum dolor sit amet  ei cum offendit partiendo iudicabit  At mei quaestio honestatis  duo dicit affert persecuti ei  Etiam nusquam cu his  nec alterum posidonium philosophia te  Nec an purto iudicabit  no vix quod clita expetendis       Quem suscipiantur no eos  sed impedit explicari ea  falli inermis comprehensam est in  Vide dicunt ancillae cum te  habeo delenit deserunt mei in  Tale sint ex his  ipsum essent appellantur et cum     So I recommend this approach that resolves the issue     x000D   x000D  li   x000D      list-style-type  none  x000D      position  relative        It s needed for setting position to absolute in the next rule     x000D    x000D   x000D  li  before   x000D      content        x000D      position  absolute  x000D      left  -0 8em              Adjust this value so that it appears where you want     x000D      font-size  1 1em          Adjust this value so that it appears what size you want     x000D    x000D   lt ul gt  x000D       lt li gt Lorem ipsum dolor sit amet  ei cum offendit partiendo iudicabit  At mei quaestio honestatis  duo dicit affert persecuti ei  Etiam nusquam cu his  nec alterum posidonium philosophia te  Nec an purto iudicabit  no vix quod clita expetendis  lt  li gt  x000D       lt li gt Quem suscipiantur no eos  sed impedit explicari ea  falli inermis comprehensam est in  Vide dicunt ancillae cum te  habeo delenit deserunt mei in  Tale sint ex his  ipsum essent appellantur et cum  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

[css] Customize list item bullets using CSS

Examples related to css

Examples related to size

Examples related to html-lists

Examples related to listitem