Customize list item bullets using CSS

前端 未结 12 1224
感动是毒
感动是毒 2020-12-15 03:17

Is it possible to change the size of an

  • element\'s bullet?

    Take a look at the code below:

    li {
        list-sty         
    
    
            
  • 12条回答
    •  半阙折子戏
      2020-12-15 03:54

      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:

      li {
          list-style-type: none;
          position: relative;    /* It's needed for setting position to absolute in the next rule. */
      }
      
      li::before {
          content: '■';
          position: absolute;
          left: -0.8em;          /* Adjust this value so that it appears where you want. */
          font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
      }
      • 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.

    提交回复
    热议问题