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.

— 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