Símbolo de marcador personalizado para <li> elementos em <ul> que são caracteres regulares e não uma imagem

125

Sei que é possível especificar um gráfico personalizado para ser um caractere de marcador de substituição, usando o atributo CSS:

list-style-image

E então fornecendo um URL.

No entanto, no meu caso, eu só quero usar o símbolo '+'. Não quero criar um gráfico para isso e depois apontá-lo. Prefiro apenas instruir a lista não ordenada a usar um símbolo de adição como símbolo de marcador.

Isso pode ser feito ou sou forçado a torná-lo um gráfico primeiro?

html  css  webkit  mobile-webkit 
— idStar
fonte

Respostas:

81

O seguinte é citado em listas de domesticação :

Pode haver momentos em que você tenha uma lista, mas não deseja marcadores ou deseja usar outro caractere no lugar do marcador. Mais uma vez, o CSS fornece uma solução direta. Basta adicionar o estilo de lista: nenhum; de acordo com sua regra e forçar os LIs a serem exibidos com recuos pendentes. A regra será mais ou menos assim:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

O preenchimento ou a margem precisam ser definidos como zero, com o outro definido como 1em. Dependendo do “marcador” que você escolher, pode ser necessário modificar esse valor. O recuo de texto negativo faz com que a primeira linha seja movida para a esquerda nessa quantidade, criando um recuo deslocado.

O HTML conterá nosso UL padrão, mas com qualquer caractere ou entidade HTML que você deseja usar no lugar do marcador anterior ao conteúdo do item da lista. No nosso caso, usaremos », a citação dupla de ângulo direito:».

»Item 1
» Item 2
»Item 3
» Item 4
»Item 5, vamos demorar
   um pouco mais para que
   ele enrole

— Evangelista da API do TJ WealthEngine
fonte
1
Sua solução funcionou, em combinação com o pseudo-seletor: before que você e @Tieson T. apontam. Gostei que você tenha destacado como os vários atributos do <UL> funcionam em conjunto para imitar o recuo da bala.
— IdStar #
9
Foi assim que eu montei, que funcionou: ul {font-size: 14px; altura da linha: 16 px; estilo de lista: nenhum; margem esquerda: 0; padding-left: 1em; recuo do texto: -1em; } li: antes de {content: "+"; } Tive que colocar um espaço após o símbolo +, mas parece razoavelmente bem alinhado.
— IdStar
6
Infelizmente, com esse método, o sinal de marcador é incluído nas seleções, o que não é o caso dos marcadores normais.
— Konrad Höffner
169

Esta é uma resposta tardia, mas me deparei com isso ... Para obter o recuo correto em todas as linhas que envolvem, tente da seguinte maneira:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}
— Mike T
fonte
1
Para mim, é melhor usar ch como a unidade de medida, especificamente text-indent: -2chpara contabilizar o sinal + e o espaço depois dele, e depois padding-right: 1chadicionar esse espaço. Ainda assim, um grande +1.
— Cobaltduck 10/08
44

Tantas soluções.
Mas ainda acho que há espaço para melhorias.

Vantagens:

  • código muito compacto
  • funciona com qualquer tamanho de fonte
    (sem valores absolutos de pixel)
  • alinha perfeitamente as linhas
    (sem ligeira mudança entre a primeira linha e as seguintes)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}
<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>
Expandir snippet

— Jpsy
fonte
2
Este é o melhor
— user3168511
1
Esta é uma resposta melhor na minha opinião, porque mostra como você pode personalizar outros detalhes também. E também possui o "Trecho de código de execução" anexado!
— Ionuț Ciuta 01/04
1
Esta é deve ser a resposta. Limpo e simples
— EvilDr
1
Eu estava procurando uma solução usando uma imagem e tentei muitas respostas, mas esta funcionou melhor para mim! Consegui usar content: url('link-to-my-asset.svg');e definir a largura da imagem e o preenchimento entre o marcador e o conteúdo. Obrigado!
— AnnieP 23/05/19
Esta é uma boa resposta. No entanto, eu precisava de uma solução que pudesse suportar também a contagem de colunas
— Kushagr Arora
29

Esta é a solução W3C. Funciona no Firefox e Chrome.

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

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }
  <ul><li>item</li></ul>
Expandir snippet

— PHPst
fonte
2
Embora pareça funcionar nas versões atuais do Firefox, o resultado é extremamente feio: marcador personalizado é colocado bem na frente do conteúdo do texto (encaixando nele), quase como se li:before {content:"…";}fosse usado sem nenhum outro recuo e alinhamento.
— Anton Samsonov
19

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

ul {
    list-style: none;
    margin-left: 0;
    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 seu personagem, altere-o de acordo com suas necessidades.

— NicolasBernier
fonte
Esta é facilmente a melhor solução que encontrei.
— Charles Roper
ab-uso de floatnovo? ... naah.
10

Minha solução usa o posicionamento para obter linhas quebradas automaticamente alinhadas corretamente. Portanto, você não precisa se preocupar em definir o preenchimento - antes:

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}
<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Expandir snippet

— user648519
fonte
8

É aconselhável qualificar o estilo do item <li>para que não afete os <ol>itens da lista. Assim:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}
— silverliebt
fonte
8

Font-awesome fornece uma ótima solução pronta para uso:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>
Expandir snippet

— sdw
fonte
4 

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}
<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
Expandir snippet

— prumo
fonte
-Se votou esta apenas por causa de / * copiar e colar uma bala de HTML no navegador em css (sem uso de códigos ASCII) * /
— kheya
2

Em estilo traço:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
— dmartinezfernandez
fonte
1

Eu prefiro usar margem negativa, te dá mais controle

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
— John Magnolia
fonte
1

Curiosamente, eu não acho que nenhuma das soluções postadas seja boa o suficiente, porque elas se baseiam no fato de que o personagem usado tem 1 ponto de largura, o que não precisa ser assim (com exceção da resposta de John Magnolia, que no entanto usa flutuadores que podem complicar as coisas de outra maneira). Aqui está a minha tentativa:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Expandir snippet

Isso tem essas vantagens (sobre outras soluções):

  1. Não depende da largura do símbolo, como você vê no exemplo. Eu usei dois caracteres para mostrar que ele funciona mesmo com marcadores largos. Se você tentar fazer isso em outras soluções, o texto ficará desalinhado (na verdade, é visível até com o símbolo * em zooms mais altos).
  2. Dá a você controle total do espaço usado pelas balas . Você pode substituir 30px por qualquer coisa (até 1em etc). Só não se esqueça de mudar nos três lugares.
  3. Se lhe der controle total do posicionamento da bala . Basta substituir o text-align: center;por qualquer coisa ao seu gosto. Por exemplo, você pode tentar color: red; text-align: right; padding-right: 5px; box-sizing: border-box; ou se não gosta de brincar com caixas de borda, basta subtrair o preenchimento (5px) da largura (ou seja, largura: 25px neste exemplo). Existem muitas opções.
  4. Ele não usa carros alegóricos para que possa ser contido em qualquer lugar.

Aproveitar.

— gorn
fonte
1 

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}
<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>
Expandir snippet

— Viraj Giri
fonte
Obrigado - Isso é muito limpo e eu esqueci o !importantque era vital para que meu CSS personalizado no Blogspot funcionasse
— velkoon
-2

tente isso

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>
Expandir snippet

— Venkat
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.