Вставка элемента между элементами списка

Question

У меня есть список из 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>

Answer 1

например так:

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none outside;
    clear: both;
}
ul li {
    padding: 0;
    margin: 0 15px 15px 0;
    position: relative;
    width: 22%;
    border: 1px solid #ddd;
}

ul li:after {
    content: "XXX";
}

ul li:nth-child(n + 5):after {
    content: "YYY";
}

ul li:nth-child(n + 9):after {
    content: "";
}

<ul>
  <li class="product">Item 1</li>
  <li class="product">Item 2</li>
  <li class="product">Item 3</li>
  <li class="product">Item 4</li>
  <li class="product">Item 5</li>
  <li class="product">Item 6</li>
  <li class="product">Item 7</li>
  <li class="product">Item 8</li>
  <li class="product">Item 9</li>
  <li class="product">Item 10</li>
</ul>

Answer 2

Как у Вас ниже - это не то, что мне нужно. Строка добавляется в рамке перед всеми элементами. Единственное до чего додумалась это вот так, но это усложняет код и верстку адаптивки и как по мне это черти что:

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:nth-child(1)::before {
    position: absolute;
    top: -70px;
    width: 100%;
    padding: 15px 0;    
    content: 'По отраслям';
}
ul li:nth-child(5)::before {
    position: absolute;
    top: -70px;
    width: 100%;
    padding: 15px 0;    
    content: 'По вендорам';
} 
ul li:nth-child(n){
    margin-top: 50px;
} 
ul li:nth-child(n + 9){
    margin-top: 0;
}

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

Должно быть вот так:

Может кто знает вариант попроще?

Answer 3

Как-то так

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;
}

<h2>Строка 1</h2>
<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>
</ul>
  <h2>Строка 2</h2>
  <ul>
  <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>

Answer 4

function createNode({nodeName, nodeClasses, nodeText}) {
  const node = document.createElement(nodeName);
  node.classList.add(...nodeClasses);
  node.innerText = nodeText;
  return node;
}

const productItem1 = document.querySelector('.product__item:nth-of-type(1)');
const blockBeforeItem1 = createNode({
  nodeName: 'div',
  nodeClasses: ['product__title'],
  nodeText: 'Строка 1'
});
productItem1.before(blockBeforeItem1);

const productItem4 = document.querySelector('.product__item:nth-of-type(4)');
const blockAfterItem4 = createNode({
  nodeName: 'div',
  nodeClasses: ['product__title'],
  nodeText: 'Строка 2'
});
productItem4.after(blockAfterItem4);

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.product__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.product__item {
  border: 2px solid #ddd;
}

.product__title {
  grid-column: 1 / 4;
  background-color: red;
  padding: 10px 0;
  color: white;
}

<ul class="product__container">
  <li class="product__item">Item 1</li>
  <li class="product__item">Item 2</li>
  <li class="product__item">Item 3</li>
  <li class="product__item">Item 4</li>
  <li class="product__item">Item 5</li>
  <li class="product__item">Item 6</li>
  <li class="product__item">Item 7</li>
  <li class="product__item">Item 8</li>
  <li class="product__item">Item 9</li>
  <li class="product__item">Item 10</li>
</ul>

БЛОГ НА HUSL

Вставка элемента между элементами списка

Ответы (4 шт):