Traço de tipo de estilo de lista HTML

222

Existe uma maneira de criar um estilo de lista em HTML com um traço (ou seja - ou - –ou - —) ou seja

<ul>
  <li>abc</li>
</ul>

Saída:

- abc

Ocorreu-me fazer isso com algo do tipo li:before { content: "-" };, embora eu não conheça os contras dessa opção (e seria muito obrigado pelo feedback).

Mais genericamente, eu não me importaria em saber como usar caracteres genéricos para itens de lista.

html css xhtml html-lists Brian M. Hunt
fonte

79

como o traço é comumente usado em listas, por que não é incluído por padrão no css?

911811

101

mais importante, por que há numeração armênia e katakana ... mas não traços?

Henry C

108

Você pode usar :beforee content:tendo em conta que esta não é suportado no IE 7 ou abaixo. Se você não concorda com isso, então esta é sua melhor solução. Consulte as tabelas de compatibilidade Can I Use ou QuirksMode CSS para obter detalhes completos.

Uma solução um pouco mais desagradável que deve funcionar em navegadores mais antigos é usar uma imagem para o marcador e apenas fazer com que a imagem pareça um traço. Veja a página do W3Clist-style-image para exemplos.

Darko Z
fonte

27

O problema :beforeé que, quando os itens da lista abrangem várias linhas, o recuo na segunda linha começa onde está o traço, arruinando o efeito da lista recuada. Você precisa usar recuos pendurados para evitar isso. Veja isto: alistapart.com/articles/taminglists

chiborg

3

Para colocar o mdash em contentusocontent: "\2014\a0"

Ivan Z

Veja a resposta de @three, que é mais genérica e menos detalhada!

Ben Vertonghen

221

Existe uma correção fácil (recuo do texto) para manter o efeito da lista recuada com a :beforepseudo classe.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Expandir snippet

aron.lakatos
fonte

14

Funciona, mas não esqueça de colocar list-style-type: none;o <ul>elemento.

toesslab

5

sem recuo apenasul li:before{ content:"- ";}

Qlimax

4

Eu prefiro adicionar display: block; float: left;ao li:beforeque pode retirá-lo mais facilmente do fluxo de conteúdo, caso contrário, é muito difícil / complicado obter as primeiras linhas e as linhas subsequentes alinhadas corretamente. Ou a resposta de Keyan Zhang também faz isso com posicionamento absoluto.

Simon East

8

muito burro que list-style-type dashnão faz parte do CSS já

Pixelomo

O que seria uma solução somente em HTML semelhante à que você propôs?

pluton

74

Aqui está uma versão sem qualquer posição relativa ou absoluta e sem recuo de texto:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

Aproveitar ;)

velop
fonte

1

ótimo! eu sugeriria 'ul.dash> li: before'. caso contrário, as uls internas ficam confusas.

Wstoettinger 15/09/2015

1

Eu prefiro adicionar display: block; float: left;ao li:beforeque pode retirá-lo mais facilmente do fluxo de conteúdo, caso contrário, é muito difícil / complicado obter as primeiras linhas e as linhas subsequentes alinhadas corretamente. Ou a resposta de Keyan Zhang também faz isso com posicionamento absoluto.

Simon East

Eu uso isso como uma .activeclasse de navegação com li:before { visibility: hidden; }eli.active:before { visibility: visible; }

sshow 02/10

Melhor sugestão imo!

Ben Vertonghen

64

Usa isto:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Jase
fonte

3

Infelizmente, não é o respeito pelas cores do texto CSS.

Hereblur

7

A única solução possível para e-mails

Oleg

Agora não está funcionando para o Gmail (novembro de 2018) e o Outlook 2016.

user2875289

33

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

violino de demonstração

Keyan Zhang
fonte

25

Deixe-me adicionar minha versão também, principalmente para encontrar novamente minha solução preferida:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

Expandir snippet

https://codepen.io/burningTyger/pen/dNzgrQ

três
fonte

IMHO é a melhor solução até agora. Obrigado por compartilhar!

Axel

14

No meu caso, adicionando este código ao CSS

ul {
    list-style-type: '- ';
}

foi o suficiente. Simples como é.

Albert Sosnowski
fonte

1

Supondo que essa seja uma adição relativamente nova ao CSS, já que não consigo encontrar outra resposta que a mencione, mas essa realmente deve ser a resposta aceita atualmente.

23917 ahstro

4

Isso parece ser suportado apenas no Firefox para desktop: developer.mozilla.org/pt-BR/docs/Web/CSS/list-style-type

dave

Agora isso também é suportado no Chrome (a partir de 79, acredito): chromestatus.com/feature/5893875400966144 e caniuse.com/#feat=mdn-css_properties_list-style-type_string

Alex

9

Uma das principais respostas não funcionou para mim, porque, após um pouco de tentativa e erro, o li: before também precisava da exibição da regra css: bloco inline.

Portanto, esta é uma resposta totalmente funcional para mim:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Joery
fonte

isto está escrito em MENOS / SASS.

Arslan Ameer

7

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

user3849374
fonte

provavelmente `` `ul {margin: 0; tipo de estilo de lista: nenhum; } ul li: before {content: "-";} `` `caso contrário, também afeta as listas ol

Sasha Bond

5

Aqui está a minha versão do violino :

O (Modernizr) classe .generatedcontentem <html>praticamente significa IE8 + e todos os outros navegadores são.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

biziclop
fonte

3

Não sei se existe uma maneira melhor, mas você pode criar um gráfico de marcador personalizado representando um traço e informar o navegador que você deseja usá-lo em sua lista com a propriedade do tipo de estilo de lista . Um exemplo nessa página mostra como usar um gráfico como marcador.

Eu nunca tentei usar: antes do jeito que você tem, embora possa funcionar. A desvantagem é que ele não será suportado por alguns navegadores mais antigos. Minha reação intestinal é que isso ainda é importante o suficiente para ser levado em consideração. No futuro, isso pode não ser tão importante.

EDIT: Eu fiz alguns testes com a abordagem do OP. No IE8, não consegui fazer a técnica funcionar, por isso definitivamente ainda não é entre navegadores. Além disso, no Firefox e Chrome, definir o estilo de lista como nenhum em conjunto parece ser ignorado.

TNi
fonte

3

Minha solução está em adicionar tag de extensão extra com mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

e adicionando ao css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Victor Stagurov
fonte

3

Outra maneira:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

imos
fonte

3

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

blackchestnut
fonte

1

Isso não funciona para itens que se estendem por mais de uma linha

jenlampton

2

Em vez de usar lu li, usado dl (definition list) and dd. <dd>pode ser definido usando o estilo CSS padrão {color:blue;font-size:1em;}e, como marcador, qualquer símbolo que você colocar após a tag html. Funciona como ul li, mas permite que você use qualquer símbolo, basta recuá-lo para obter o efeito de lista recuada com que você normalmente se encontra ul li.

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

Dá um código muito mais limpo! Dessa forma, você pode usar qualquer tipo de personagem como marcador! Recuar é sobre -10pxe funciona perfeito!

Carolyne Comtois
fonte

7

Isso é muito ruim por duas razões. Em primeiro lugar, você coloca os caracteres de marcador diretamente no texto, misturando conteúdo e estilo. Em segundo lugar, você está usando mal o elemento dl, aqui está um artigo sobre o uso correto .

precisa saber é o seguinte

1

Para quem está com esse problema hoje, a solução é simplesmente:

estilo da lista: "-"

Abelha morcego
fonte

-1

O que funcionou para mim foi

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

C oneil
fonte

Traço de tipo de estilo de lista HTML

Respostas: