Você sabe como fazer uma lista usando ul e li dá uma lista pontilhada / com marcadores, certo? Como isso:
- Item de lista 1
- Lista Iyem 2
Bem, você sempre quis marcadores personalizados para determinada lista, mas não poderia ir e codificá-los porque o conteúdo deve ser dinâmico? Aqui está um truque bacana para você.
Para este exemplo, substituiremos os pontos por “>”.
Em seu css, selecione seu li e defina o estilo de lista como nenhum, assim:
ul li{ list-style: none; }Em seguida, selecione o mesmo li, aplique o seletor: before a ele e defina o conteúdo para o caractere, em seus
valores hexadecimais de escape .
ul li:before{ content: " 03E 020"; }003E é o valor hexadecimal para o caractere “>” e 0020 é o valor para um espaço. Os valores hexadecimais podem ser encontrados aqui.
E agora para o resultado final, dê uma olhada!
- Item 1 da lista.
- Item 2 da lista.
Você pode querer movê-los um pouco para a esquerda, para que os caracteres adicionados apareçam exatamente na mesma posição que os marcadores, mas isso não é muito difícil.