CSS - list-item (list formatting)

About

The list-item value of the display property will let the element behave like a

  • ]] element),

    This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. (list formatting).

    Articles Related

    Property

    list-style is a grouping of the following properties in the following order:

    • list-style-type specify the marker
    • list-style-position specify if the marker is outside or inside the box. Values may be:
      • outside (default)
      • inside
      • inherit
    • list-style-image

    More TR/CSS2/generate.html

    Marker

    Icon

    The marker may be replaced with a before content property

    ul {
      list-style-type: none;
    }
    ul > li:before {
      content: "- ";
    }
    
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    

    Position: Outside / Inside the box

    list-style-position specify if the marker is outside or inside the box. Values may be:

    • outside (default)
    • inside
    • inherit

    Position: Horizontally

    You can position the marker horizontally with the text-indent property

    ul {
       text-indent: 10em;
    }
    
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    

    Support

    List and Float

    Documentation / Reference


  • Powered by ComboStrap