Menu
I’m working on a grid layout using Tailwind CSS (v4.1).
Visit this play snippet
https://play.tailwindcss.com/cAvvS656Ts
Here’s a minimal example:
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility border-line-1 {
content: "";
width: 100vw;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<body class="bg-gray-800">
<section class=" h-[100vh] w-full bg-gray-900 p-4 text-white">
<div class=" grid grid-cols-4 grid-rows-6 gap-5">
<div class="row-span-6 border border-white">A</div>
<div class="relative col-span-2 border border-white after:border-line-1">B</div>
<div class="row-span-6 border border-white">C</div>
<div class="row-span-4 border border-white">D</div>
<div class="row-span-4 border border-white">E</div>
<div class="col-span-2 border border-white">F</div>
</div>
</section>
</body>The red line should start from the beginning of section A (so basically from the very left edge of the grid container).
It should span the entire width (A → B → C).
It should sit exactly at the bottom of B.
Since the pseudo-element is inside B, it only positions relative to B. If I hack it with left:-180px, it looks close to what I want — but that’s not responsive or correct.
How can I properly make this red line span the full width of the grid container but align with the bottom of B without hardcoding offsets?
This is purely a CSS positioning issue — I’m just using Tailwind classes to generate the CSS, so I added the tailwind-css tag as well.
770
asked Oct 20 '25 13:10
A perfect use case for anchor positioning even if the support is still not good
section:after {
content: "";
position: absolute;
height: 2px;
background-color: red;
inset: auto anchor(--C right) anchor(--B bottom) anchor(--A left);
}
.A { anchor-name: --A}
.B { anchor-name: --B}
.C { anchor-name: --C}<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<body class="bg-gray-800">
<section class=" h-[100vh] w-full bg-gray-900 p-4 text-white">
<div class=" grid grid-cols-4 grid-rows-6 gap-5">
<div class="row-span-6 border border-white A">A</div>
<div class="relative col-span-2 border border-white B">B</div>
<div class="row-span-6 border border-white C">C</div>
<div class="row-span-4 border border-white">D</div>
<div class="row-span-4 border border-white">E</div>
<div class="col-span-2 border border-white">F</div>
</div>
</section>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
