CSS Data Type - <display-listitem>

The keyword list-item makes the element to generate a ::marker pseudo-element with the content that is specified by the list-style properties, along with a main box of the specified type for its own contents.

An element will behave like a list item with a single value of list-item. It can be used together with list-style-type and list-style-position.

The keyword list-item can be combined with any <display-outside> keyword and the <display-inside> keywords, such as, flow or flow-root.

Note: The browsers that support the two-value syntax, will default the inner value to flow, when it is not passed. And when no outer value is passed, the principal box will have an outer display type of block.

Syntax

<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item

CSS <display-listitem> - list-item

The following example demonstrates the use of display: list-item, where a div element is displayed as list value:

<html>
<head>
<style> 
   .sample-list {
      display: list-item;
      list-style-position: inside;
      color: green;
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1><display-listitem> data type</h1>

   <div class="sample-list">First list item</div>
   <div class="sample-list">Second list item</div>
</body>
</html>
Advertisements