Как избавиться от обрезания картинки в теге li?

Question

[AlexGlinskiy]

Привет! Делаю список на бве калонки. В списке тегу li через ::before вставляю картинку и делаю список в две колонки, с помощью column-count: 2;. При этом у первого элемента второй колонки обрезается картинка. Как исправить?

html

<ul>
   <li>Протирка фасадов шкафов и мебели на высоту до двух метров</li>
  <li>Протирка подоконников</li>
  <li>Протирка столешниц и всех доступных поверхностей</li>
  <li>Протирка смесителей и раковин</li>
</ul>

scss

ul {
		list-style-type: none;
		font-size: 16px;
		margin-bottom: 0;
		padding-left: 0;
		column-count: 2;
		
		li {
			position: relative;
			padding-left: 40px;
			margin-bottom: 20px;

			&::before {
				content: '';
				display: inline-block;
				width: 30px;
				height: 30px;
				background-image: url('../img/check.svg');
				background-size: cover;
				position: absolute;
				z-index: 1;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

Comments

[Rustam Bainazarov]

Баг работы column-count. Поможет только больший отступ от границ элемента, чтобы ничего не вылетало за его пределы с запасом. Сделайте ваш before ровно по вертикальным границам блока.

Либо отказ от column-count. Иных решений нет.

[AlexGlinskiy]

Рустам Байназаров, https://codepen.io/aleksglinskiy/pen/oNjYNgw

[Rustam Bainazarov]

AlexGlinskiy, так, и? Вы не исправили это. Before на absolute так и вылетает за пределы бокса родительского li. А должен быть в его рамках. Иначе вы это не обойдёте.

[AlexGlinskiy]

Рустам Байназаров, просто вы сразу написали скинь в codepen, вот и скинул))

Answer 1

[Os Letnik]

background-size: contain;

Comments

[Rustam Bainazarov]

Нет, дело не в этом. Это особенность работы column-count. Начиная со второй колонки всё, что выходит за бокс элемента, — обрезается. Та иконка у него на absolute и выходит за пределы родителя. Поэтому и обрезается а-ля overflow: hidden.

[AlexGlinskiy]

Рустам Байназаров, спасибо! Я так раньше делал, просто думал может, есть другой способ.