Выбор последнего элемента разделителя, который не был обернут [дубликат] ⇐ CSS

[Anonymous]

В предисловии отметим, что мы не можем изменить HTML, поэтому разделители необходимо вставлять с использованием предоставленного HTML, как показано в HTML ниже. Мы также не можем использовать теги ul и li.
Я провел тщательный поиск на Stack Overflow и других сайтах, и, похоже, не существует способа выбрать последний незавернутый элемент. В нашем конкретном случае у меня есть следующая структура HTML, которая динамически отображается со страницы Sightly (HTL) в новом компоненте AEM, который мы создаем, поэтому я не могу вносить какие-либо изменения в HTML. Мы застряли на следующей структуре, но можем изменить CSS и JS. Мы также можем добавлять/удалять классы в HTML ниже.



Button number one



Button number two



CTA button number three



Button number four





Когда ширина окна слишком мала для отображения всех кнопок в одной строке, последняя кнопка переносится на следующую строку. Когда ширина окна уменьшится еще больше, две кнопки могут перейти на следующую строку. Когда это произойдет, в первой строке появится конечный разделитель, который необходимо скрыть. Как я могу указать последний разделитель в первой строке или в обеих строках, чтобы его можно было скрыть?
В отличие от другого поста на Stack Overflow, в котором показаны примеры с использованием тегов ul li и псевдоэлемента «before», этот сценарий предполагает использование тегов, стилизованных под кнопки Bootstrap (btn btn-primary), что усложняет ситуацию. Поскольку это не похоже на вопрос ul li, мы не можем сделать следующее:

• Добавить разделители с псевдоэлементом «before» МЕЖДУ кнопками. . Они вставляются В кнопки.
• Перед переносом выберите последний элемент в строке. В каждом опробованном нами решении разделители размещаются внутри кнопок.

Редакторы контента могут использовать от одной до четырех кнопок. Я использую простой CSS, чтобы скрыть последний разделитель, так что это не проблема, но если бы был способ скрыть последний разделитель в каждой строке, это было бы лучшим подходом.
Вот CSS, который у меня есть:
.container {
justify-content: center;
margin: 16px auto;
padding: 16px 0;
}
.multi-cta-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}

.multi-cta-group a {
color: #fff;
justify-content: center;
}

.flex-divider {
width: 1px;
background-color: gray;
height: auto;
}

.flex-divider:last-child {
display: none;
}

.bg-gray-400 {
background-color: #bdc2c7;
}

@media (max-width: 768px) {
.multi-cta-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.multi-cta-group .btn {
justify-content: center;
width: auto;
}
}

На других сайтах есть другие обсуждения, и, похоже, нет возможности выбрать последний элемент перед переносом.
Рабочий стол (последний элемент разделителя после четырех. Это скрыто CSS и не является проблемой.)
One | Two | Three | Four

Большой планшет (окно просмотра (ширина окна), в котором выполняется перенос, может варьироваться в зависимости от длины текста кнопки и количества кнопок, поэтому мы не можем использовать медиа-запросы. В примере ниже нам нужно скрыть разделительную линию после «Три».)
One | Two | Three |
Four

Маленькая табличка (под разделительной линией после того, как две части необходимо удалить или скрыть.)
One | Two
Three | Four

Мобильные устройства (Мобильные устройства не являются проблемой. Мы просто скрываем все элементы-разделители с помощью класса под названиемide-sm.)
One
Two
Three
Four


Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-wrapped