How to align my before elements from text?

 ul li { .source_sans_reg(); font-size: 18px; list-style-type: none; } ul .li_1::before { content: url(../Img/device/Cup.png); } ul .li_2::before { content: url(../Img/device/Mouse.png); } ul .li_3::before { content: url(../Img/device/Energy.png); } ul .li_4::before { content: url(../Img/device/Speedometer.png); } } 
 <ul> <li class="li_1">Awesome design</li> <li class="li_2">Fully responsive</li> <li class="li_3">Retina ready</li> <li class="li_4">Tons of features and easy to use</li> </ul>

    1 answer 1

    Something like this. For each image you can register your top and left . But without a specific image it is difficult to predict what exactly is there with you.

     ul li { font-size: 18px; line-height: 1.4em; padding-left: 2.2em; list-style-type: none; position: relative; } ul li:before { position: absolute; top: .7em; left: 0; } ul .li_1::before { content: url(../Img/device/Cup.png); } ul .li_2::before { content: url(../Img/device/Mouse.png); } ul .li_3::before { content: url(../Img/device/Energy.png); } ul .li_4::before { content: url(../Img/device/Speedometer.png); } 
     <ul> <li class="li_1">Awesome design</li> <li class="li_2">Fully responsive</li> <li class="li_3">Retina ready</li> <li class="li_4">Tons of features and easy to use</li> </ul>