Você pode usar o before
ou after
pseudo-elemento e aplique um pouco de CSS para ele. Existem várias maneiras. Você pode adicionar before
e after
, e girar e posicionar cada um deles para formar uma das barras. Uma solução mais fácil é adicionar duas bordas apenas ao before
elemento e girá-lo usando transform: rotate
.
Role para baixo para uma solução diferente que usa um elemento real em vez dos elementos pseuso
Nesse caso, adicionei as setas como marcadores em uma lista e usei os em
tamanhos para fazê-los dimensionar adequadamente com a fonte da lista.
ul {
list-style: none;
}
ul.big {
list-style: none;
font-size: 300%
}
li::before {
position: relative;
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.5em;
}
/* Change color */
li:hover {
color: red; /* For the text */
}
li:hover::before {
border-color: red; /* For the arrow (which is a border) */
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul class="big">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
Claro que você não precisa usar before
ou after
, pode aplicar o mesmo truque a um elemento normal também. Para a lista acima, é conveniente, porque você não precisa de marcação adicional. Mas às vezes você pode querer (ou precisar) a marcação de qualquer maneira. Você pode usar um div
ou span
para isso, e eu até vi pessoas reciclarem o i
elemento para 'ícones'. Portanto, essa marcação pode ser semelhante a abaixo. Se usar <i>
para isso está certo é discutível, mas você pode usar span para isso também por segurança.
/* Default icon formatting */
i {
display: inline-block;
font-style: normal;
position: relative;
}
/* Additional formatting for arrow icon */
i.arrow {
/* top: 2pt; Uncomment this to lower the icons as requested in comments*/
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.
Se você busca mais inspiração, não deixe de conferir esta incrível biblioteca de ícones CSS puros de Nicolas Gallagher . :)