Оформление текста занимает <span>s

У меня есть элемент <ul> с элементами списка как таковой:

<ul>
    <li class = "list__item">
        <span class = "list__quantity">3</span>
        <span class = "list__unit">Kg</span>
        <span class = "list__name">Tomatos</span>
     </li>
     <li class = "list__item">
        <span class = "list__quantity">3</span>
        <span class = "list__unit">Kg</span>
        <span class = "list__name">Cucmbers</span>
      </li>
</ul>

Я хочу, чтобы text-decoration: line-through охватывал весь элемент списка. Я пробовал:


.list__item {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    text-decoration: line-through;
}

Но мой список выглядит так:

Я хочу, чтобы линия была непрерывной и охватывала весь элемент списка.

Это возможно?

html css

28.07.2024 18:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Не используйте line-through, используйте псевдоэлемент, расположенный над span.

.list__item {
  display: flex;
  margin-bottom: 10px;
  /*     text-decoration: line-through; */
  position: relative;
  width: min-content;
}

.list__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: red;
}

span {
  padding: 0 0.25em;
}

<ul>
  <li class = "list__item">
    <span class = "list__quantity">3</span>
    <span class = "list__unit">Kg</span>
    <span class = "list__name">Tomatos</span>
  </li>
  <li class = "list__item">
    <span class = "list__quantity">3</span>
    <span class = "list__unit">Kg</span>
    <span class = "list__name">Cucmbers</span>
  </li>
</ul>

удаленное изображение

28.07.2024 18:12

Ответ принят как подходящий

Для этого вы можете использовать псевдоэлемент ::before. Единственным недостатком является то, что вам придется ограничить ширину элементов li до max-content или вы можете вручную установить значения ширины линии.

В качестве альтернативы вы можете использовать элемент psuedo в самом диапазоне. Это потребует некоторых усилий, чтобы получить точную ширину и положение в соответствии со всеми данными вашего списка. Первый метод немного проще и минималистичнее, но вы можете использовать второй, если вам нужно, чтобы li было width:100%.

.list__item {
  position: relative;
  display: flex;
  margin-bottom: 10px;
  width: max-content;
}

.list__item::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: black;
}

<ul>
  <li class = "list__item">
    <span class = "list__quantity">3</span>
    <span class = "list__unit">Kg</span>
    <span class = "list__name">Tomatos</span>
  </li>
  <li class = "list__item">
    <span class = "list__quantity">3</span>
    <span class = "list__unit">Kg</span>
    <span class = "list__name">Cucmbers</span>
  </li>
</ul>

Жаль, что нет более простого способа сделать это, но неважно :)

— 28.07.2024 19:24

28.07.2024 18:14