I wanted to add to JOPLOmacedo's answer. His solution is my favourite, but I always had problem with indentation when the li had more than one line. It was fiddly to find the correct indentation with margins etc. But this might concern only me.
For me absolute positioning of the :before
pseudo-element works best. I set padding-left
on ul, negative position left on the :before
element, same as ul's padding-left
. To get the distance of the content from the :before
element right I just set the padding-left
on the li. Of course the li has to have position relative. For example
ul {
margin: 0 0 1em 0;
padding: 0 0 0 1em;
/* make space for li's :before */
list-style: none;
}
li {
position: relative;
padding-left: 0.4em;
/* text distance to icon */
}
li:before {
font-family: 'my-icon-font';
content: 'character-code-here';
position: absolute;
left: -1em;
/* same as ul padding-left */
top: 0.65em;
/* depends on character, maybe use padding-top instead */
/* .... more styling, maybe set width etc ... */
}
Hopefully this is clear and has some value for someone else than me.
::marker
psudeo-element is not supported. It is now supported across several browsers – Spectric