list-style – CSS: Cascading Style Sheets

The list-style CSS shorthand property allows you to set all the list style properties at once.

Note: This property is applied to list items, i.e., elements with display: list-item; . By default this includes

  • elements. Because this property is inherited, it can be set on a parent element (normally
      or

        ) to make the same list styling apply to all the items inside.

        This property is a shorthand for the following CSS properties:

        list-style: square; list-style: url(‘../img/shape.png’); list-style: inside; list-style: georgian inside; list-style: lower-roman url(‘../img/shape.png’) outside; list-style: none; list-style: inherit; list-style: initial; list-style: revert; list-style: unset;

        The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

        Values

        Safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. To address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

        ul { list-style: none; } ul li::before { content: “200B”; }

        Setting list style type and position

        HTML

        List 1

        • List Item1
        • List Item2
        • List Item3

        List 2

        • List Item A
        • List Item B
        • List Item C

        CSS

        .one { list-style: circle; } .two { list-style: square inside; }

        Result

        BCD tables only load in the browser

        Source

  • Leave a comment

    Your email address will not be published. Required fields are marked *