如何删除列表中的下划线？

Question

when i make a list and insert an image in front of it (in my case a normal checkbox). then an underline appears under this checkbox. I tried to remove it as follows: text-decoration: none; but it did not help. what should I do?

 .galka1 { padding: 10px 8px 0px 0px; text-decoration-line: none; }.text6 { font-size: 20px; line-height: 36px; color: #273d46; font-family: "Arial"; filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.3)); }.spisok { width: 852px; height: 279px; font-size: 20px; line-height: 36px; color: #273d46; filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.3)); margin: auto; padding: 0px 0px 0px 70px; text-decoration: none; }

 <ul class="spisok"> <li class="text6"><img src="galka.png" class="galka1" />Put on this page information aboutyour product</li> </ul>

Answer 1

The underline is actually due to Filter drop-shadow.

filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.6));

Increases the blur amount to make it like a shadow. Like,

filter: drop-shadow(0px 1px 20px rgba(0,0,0,0.6);        

Codepen: https://codepen.io/manaskhandelwal1/pen/jOMvPap

The better way to do so is to add box-shadow to the img .

Like:

box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);

Codepen: https://codepen.io/manaskhandelwal1/pen/GRjXJdE

Answer 2

You added a shadow to.spisok that adds a small shadow line:

.spisok {
  filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.3));
}

And also you make that shadow line bigger here:

.text6 {
  filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.3));
} 

If you remove that shadow in both classes the underline will be removed.