Unordered List with checkmarks list-style-positions-outside Text aligned on the left vertically

Question

I am trying to have an unordered list with check-marks and have my text line up in the left and not have my second line of text float to the left and go under the check-marks.

Does anyone know how to make this work?

Illustrator

preco-do elements are considered as in the same line of your li 's text, so there is no way to achieve so using preco-do element, is it okay to add a span for your checkmark in front of each li – Melton

One solution (albeit not the best) would be to add a negative margin (e.g. margin-left: -1.2em;) to your pseudo element's selector. – React

Answer 1

The below code helps you in understanding. Here's a JSFiddle demo.

li:before
{
    content: '✔';   
    margin-left: -1em;
    margin-right: .100em;
}

ul
{
   padding-left: 20px;
   text-indent: 2px;
   list-style: none;
   list-style-position: outside;
}

Refer this link to get the tick mark: http://amp-what.com/#q=check%20mark

Paste the code in the content property of li to get the check mark. I hope this will help you. Please vote.

Kaylee

OK Gourav, your code worked PERFECT :) thank you for laying it out with the checkmark and the link to that awesome amp-what.com site. -- Also thanks to jasonlyvia and sbat --- Wish they made it more obvious on how to vote??? I cant find any buttons of options anywhere to vote? Why? I must not have enough rank!!! – Illustrator

@TonyStates :The up and down arrows beside the Answer. – Kaylee

@TonyStates Hmmm ok see what you do :) – Kaylee

I prefer to use the Entity Conversion Calculator rather than the actual check for :before content. evotech.net/articles/testjsentities.html – Cracow

Hi Gourav, I was hoping you can explain the measurements you used. I think I understand the margin-left:-1em but how do you get the margin-right:.100em and the text-indent:2px on the ul element? – Chlorohydrin

This does not work with list items that are multi-line, does it? The lines after the first don't align but rather come below the checkmark. – Jamilla