Need to arrange pictures to the left of li

Here is the code:

 <div class="left"> <h1>Product name</h1> <ul> <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li> <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li> <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li> <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li> </ul> </div>

Here is the code:

 ul li { font-size: 20px; font-family: 'Roboto', sans-serif; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }

That's how it should all look

  • inside ul, only li can be a direct descendant. - soledar10
  • well, how do i insert a picture then? ul li:before does not help me - Renat Sharapov
  • You have already been answered. With the help of the pseudo - element - soledar10

2 answers 2

Option through background for li

Example

 body{ background: #333; } ul{ padding-left: 0; } ul li { list-style: none; font-size: 20px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding-left: 30px; background: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Yes_Check_Circle.svg) no-repeat 0 0; } 
 <ul> <li>Put on this page information about your product</li> <li>Put on this page information about your product Put on this page information about your product</li> <li>Put on this page information about your product</li> <li>Put on this page information about your product</li> </ul>

    Remove the pictures from html and paste them into css:

     ul li:before { content: ''; display: block; width: 20px; /* ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ */ height: 15px; /* высота ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ */ float: left; margin-right: 5px; background: url(img/check-icon.png) no-repeat; }
    • Do not quite understand. I pasted the code, but nothing worked. I do not understand how to indicate that it should be just before these li. - Renat Sharapov
    • it should not be before li, but inside it. I have described the logic to you, I cannot give a reproducible answer without a reproducible example - Artem Gorlachev
    • ul li:before { content: ''; background-image: url(img/check-icon.png); } ul li:before { content: ''; background-image: url(img/check-icon.png); } can explain this logic. how to insert it in li? - Renat Sharapov
    • it is inserted into the css, and creates a pseudo-element inside li, in which the background is your check mark - Artem Gorlachev