У меня есть список из 10-ти элементов. Необходимо вставить 2 строки:
- перед первыми 4-мя элементами - строку "Строка 1"
- перед вторыми 4-мя элементами - строку "Строка 2".
Пробую через CSS псевдоэлементы (after, before) и свойство content: "Строка". Текст вставляется не корректно и размещается внутри рамки 1-го и 5-го элемента. Пробовала играться с position: absolute - этот вариант тянет за собой усложненный код особенно при верстке адаптивки. Может кто-то знает более простой вариант?
ul {
display: flex;
flex-wrap: wrap;
list-style: none outside;
clear: both;
}
ul li {
float: left;
padding: 0;
margin: 0 15px 15px 0;
position: relative;
width: 22%;
border: 1px solid #ddd;
}
li.first {
clear: both;
}
<ul>
<li class="product first">Item 1</li>
<li class="product">Item 2</li>
<li class="product">Item 3</li>
<li class="product last">Item 4</li>
<li class="product first">Item 5</li>
<li class="product">Item 6</li>
<li class="product">Item 7</li>
<li class="product last">Item 8</li>
<li class="product first">Item 9</li>
<li class="product">Item 10</li>
</ul>