<display-listitem>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O list-item palavra-chave faz com que o elemento gere um::marker pseudoelemento com o conteúdo especificado por sua list-style propriedades (por exemplo, um marcador) junto com uma caixa principal do tipo especificado para seu próprio conteúdo.

Sintaxe

Um valor único de list-item fará com que o elemento se comporte como um item da lista. Isso pode ser usado junto comlist-style-type e list-style-position.

list-item também pode ser combinado com qualquer <display-outside> palavra-chave e o flow ou flow-root <display-inside> palavras-chave.

Nota:: Nos navegadores que suportam a sintaxe de dois valores, se nenhum valor interno for especificado, o padrão será flow. Se nenhum valor externo for especificado, a caixa principal terá um tipo de exibição externo deblock.

Sintaxe formal

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

<display-outside> = 
  block   |
  inline  |
  run-in

Exemplo

HTML

html
<div class="fake-list">I will display as a list item</div>

CSS

css
.fake-list {
  display: list-item;
  list-style-position: inside;
}

Resultado

Compatibilidade com navegadores

Suporte delist-item

BCD tables only load in the browser

Veja também