Как сделать псевдоэлементный пролет полной ширины контейнера сетки, но выровнять с конкретным элементом сетки в Taillid ⇐ CSS

[Anonymous]

I’m working on a grid layout using Tailwind CSS (v4.1).
Visit this play snippet

https://play.tailwindcss.com/cAvvS656Ts?file=css
Here’s a minimal example:

Код: Выделить всё

@utility border-line-1 {
content: "";
width: 100vw;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}< /code>









A
B
C
D
E
F

Что я хочу

Красная линия должна начинаться с начала секции (так в основном с самого левого края контейнера сетки) /> он должен охватывать всю ширину (a → b → c). < /p>
< /li>
Он должен сидеть точно в нижней части b < /strong>. < /p>
< /li>
< /ul>
what o the h3>
< /ul>
< /h3>

, он только позиции относительно b . Если я взламываю его слева: -180PX , он выглядит близко к тому, что я хочу-но это не отзывчиво или правильно. /> примечание
Это чисто проблема с позиционированием CSS -я просто использую классы Taillid>

Подробнее здесь: https://stackoverflow.com/questions/797 ... gn-with-sp