Caractere Unicode como marcador para item de lista em CSS

114

Preciso usar, por exemplo, o símbolo de estrela (★) como marcador para um item da lista.

Eu li o módulo CSS3: Listas , que descreve como usar texto personalizado como marcadores, mas não está funcionando para mim. Eu acho que os navegadores simplesmente não suportam o::marker pseudo elemento.

Como posso fazer isso sem usar imagens?

AntonAL
fonte
você pode colocar o código que está usando? E em qual navegador você está testando?
Jonny Haynes
1
stackoverflow.com/questions/3068199/… tem alguns marcadores Unicode. Nem o símbolo de estrela que você tem acima, nem 26AB (círculo preto médio) são exibidos na minha máquina Windows, embora estejam OK no Ubuntu.
Pete Kirkham
Esta resposta (para uma pergunta semelhante) resolveu para mim: stackoverflow.com/a/12216973/907575
Piotr Migdal

Respostas:

77

EDITAR

Eu provavelmente não recomendaria mais usar imagens. Eu manteria a abordagem de usar um caractere Unicode, como este:

li:before {
  content: "\2605";
}

RESPOSTA ANTIGA

Eu provavelmente escolheria um fundo de imagem, eles são muito mais eficientes, versáteis e compatíveis com vários navegadores.

Aqui está um exemplo:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>
agbb
fonte
47
Como isso é “muito mais eficiente”? Você está enviando uma solicitação HTTP adicional para buscar a imagem e o arquivo total aumenta conforme você carrega uma imagem para algo que poderia ser feito apenas com o uso de um único caractere Unicode.
Mathias Bynens
2
você está certo, provavelmente "eficiente" não é a palavra que eu deveria usar se você está procurando desempenho, mas usar uma imagem de fundo é certamente muito mais versátil do que usar texto.
agbb
3
Não é muito bom redimensionar uma imagem, mas um caractere é perfeito em todos os tamanhos, então eu diria que um caractere é mais versátil: PI pense backword compatível ou com a mais ampla gama de suporte do navegador seria a palavra ...
JustGoscha
Isso não funciona bem quando o <li>texto quebra: o marcador não fica sem recuo e acaba parecendo o início de um parágrafo de texto. Esta resposta corrige esse problema: stackoverflow.com/a/14301918/1450294
Michael Scheper
105

Usando texto como marcadores

Use li:beforecom uma Entidade HTML Hex de escape (ou qualquer texto simples).


Exemplo

Meu exemplo produzirá listas com marcas de seleção como marcadores.

CSS :

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

Compatibilidade do navegador

Não testei a mim mesmo, mas deve ser suportado a partir do IE8. Pelo menos é o que dizem os truques quirksmode e CSS .

Você pode usar comentários condicionais para aplicar soluções mais antigas / mais lentas, como imagens ou scripts. Melhor ainda, use ambos com<noscript> para as imagens.

HTML :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

Sobre imagens de fundo

As imagens de fundo são realmente fáceis de manusear, mas ...

  1. Suporte de navegador para background-size é, na verdade, apenas a partir do IE9.
  2. Cores de texto HTML e especiais ( fontes malucas ) podem fazer muito, com menos solicitações HTTP.
  3. Uma solução de script pode simplesmente injetar a Entidade HTML e permitir que o mesmo CSS faça o trabalho.
  4. Uma boa redefinição do código CSS pode tornar list-style(a escolha mais lógica) mais fácil.

Aproveitar.

222
fonte
1
ferramenta de conversão útil para escape de caracteres especiais rishida.net/tools/conversion
iiz
23
Isso não funcionará corretamente se o conteúdo do lielemento for dividido em várias linhas; essas linhas quebradas não serão indentadas corretamente.
Richard Ev
5
float: left; margin-left: -12px;no: antes para cuidar disso, @RichardEverett
Dudo
1
Eu trabalho para uma linha, mas não funciona se várias linhas estiverem quebrando.
VDarricau
1
Funciona apenas para itens de lista de linha única. As linhas múltiplas cairão abaixo do marcador em vez de recuar.
Clarus Dignus
35

Você pode construí-lo:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}
defann
fonte
4
Esta é uma ótima técnica porque se você não fizer o posicionamento absoluto do personagem, você acaba com o "Marcador" alinhado com o resto do item da lista. Esse é um comportamento muito diferente de bala. Portanto, com essa correção, você obtém o "marcador" à esquerda do item da lista, exatamente como faria com um marcador normal.
General Redneck
Obrigado por isso! Exatamente o que eu precisava para fazer minhas balas se comportarem novamente.
tubaguy50035
1
Isso torna uma árvore de navegação maravilhosa usando '\21B3'! Obrigado! Funcionou melhor do que as outras respostas aqui. Também alterei o padding-leftem meu design para 1em, que se adapta bem quando os níveis da árvore mudam de tamanho.
ndm13
23

Esta é a solução W3C. Você pode usá-lo em 3012!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

PHPst
fonte
12
Ouvi dizer que em 3012, o Internet Explorer finalmente funciona!
Mark K Cowan
2
Isso funciona no Firefox 48, mas não no Chromium 51 ou no meu telefone / tablet. Em terá que usar a li:beforesolução.
CoderGuy123
1
Trabalho. Bem-vindos ao futuro, senhoras e senhores.
Mikko Ohtamaa
12

As imagens não são recomendadas, pois podem aparecer pixeladas em alguns dispositivos (dispositivos Apple com tela Retina) ou quando ampliadas. Com um personagem, sua lista fica sempre incrível.

Aqui está a melhor solução que encontrei até agora. Funciona muito bem e é compatível com vários navegadores (IE 8+).

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

O importante é ter o caractere em um bloco flutuante com largura fixa para que o texto permaneça alinhado se for muito longo para caber em uma única linha. 1.2em é a largura que você deseja para o seu personagem, altere-o de acordo com suas necessidades. Não se esqueça de redefinir o preenchimento e a margem dos elementos ul e li.

EDIT: Esteja ciente de que o tamanho "1.2em" pode variar se você usar uma fonte diferente em ul e li: before. É mais seguro usar pixels.

NicolasBernier
fonte
Talvez adicione "height: 1px" ou semelhante ao li: before? Isso garante que a flutuação não se estenda até o próximo <li>, causando aninhamento indesejável.
Alan De Smet
Por que o display: bloquear; em li: antes? é porque por padrão é embutido e você não pode especificar uma largura?
Alexander Solonik
6

Para adicionar uma estrela, use o caractere Unicode 22C6.

Eu adicionei um espaço para fazer uma pequena lacuna entre a lie a estrela. O código para o espaço é A0.

li:before {
    content: '\22C6\A0';
}
Dirk
fonte
4

Um exemplo mais completo da resposta de 222 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

Incluí propriedades star-hack para restaurar os estilos de lista padrão em versões mais antigas do IE. Você pode retirá-los e incluí-los em uma inclusão condicional, se desejar, ou substituí-los por uma solução baseada em imagem de plano de fundo. Minha humilde opinião é que os estilos de marcadores especiais implementados dessa maneira devem degradar normalmente nos poucos navegadores que não oferecem suporte a pseudoeletores.

Testado no Firefox, Chrome, Safari e IE8-10 e renderiza corretamente em todos.

pospi
fonte
text-indent: -1em;é uma propriedade importante se você tiver itens de lista de várias linhas. Sem ele, a segunda linha e as subsequentes se alinham com o marcador em vez da linha anterior.
Andris
3
ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}
Iacchus
fonte
1

Verifiquei toda a lista e há elementos parcialmente corretos e parcialmente incorretos até 2020.

Descobri que o recuo e o deslocamento eram o maior problema ao usar UTF-8, então estou postando isso como uma solução CSS compatível com 2020 usando o marcador "triângulo vertical" como meu exemplo.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

use emcomo unidade para evitar conflito com o tamanho da fonte

Beerswiller
fonte
0

Experimente este código ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}
Charaf JRA
fonte
-1

Este tópico pode ser antigo, mas aqui está uma solução rápida ul {list-style:outside none square;}ou ul {list-style:outside none disc;}, etc ...

em seguida, adicione preenchimento esquerdo ao elemento da lista

ul li{line-height: 1.4;padding-bottom: 6px;}
user2415803
fonte