Как мне убрать подчеркивание в списке?

#html #css

#HTML #css — код

Вопрос:

когда я создаю список и вставляю перед ним изображение (в моем случае обычный флажок). затем под этим флажком появится подчеркивание. Я попытался удалить его следующим образом: текст-оформление: нет; но это не помогло. что мне делать?

     .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>

Развернуть фрагмент кода

Ответ №1:

На самом деле подчеркивание происходит из-за тени фильтра.

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

Увеличивает степень размытия, чтобы сделать его похожим на тень. Нравится,

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

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

Лучший способ сделать это — добавить `box-shadow` в `img` .

Нравится:

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

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

Ответ №2:

Вы добавили тень в файл .spisok, который добавляет небольшую теневую линию:

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

А также вы увеличиваете эту теневую линию здесь:

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

Если вы удалите эту тень в обоих классах, подчеркивание будет удалено.