Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:
Today we are going to show you an easy way to do this.
The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.
You can stop this behaviour by taking advantage of text-indent:
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.
In the following example a value of 20px:-
ul {
list-style: none;
width: 200px;
text-indent: -20px; /* key property */
margin-left: 20px; /* key property */
}
li { margin-bottom: 10px; }
And there you have it, here is a CodePen of the above in action.
