Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 802
Tony States Avatar asked Sep 12 '13 02:09

Tony States


People also ask

How do I change the position of a list in CSS?

The list-style-position property specifies the position of the list-item markers (bullet points). list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically: Coffee - A brewed drink prepared from roasted coffee beans...


1 Answers

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.

like image 192
Gourav Avatar answered Sep 21 '22 15:09

Gourav