Can I set a border-bottom to match the size of a separate class?
For example, I want a border-bottom at the bottom of each <section> tag. However, since the sections span the full width of the screen, the border-bottom inherits that width.
Each <section> contains a <div class="container">, and I need the border-bottom to align with the container's width to only underline the content within that <section>.
I tried this:
section{
.container:first-child{
border-bottom: 2px solid red;
}
}
But it didn't work as expected because the containers close before reaching the end of the content.
There can be multiple containers in a <section>, so adding it to the container itself won't work.
NOTE: I'm open to SCSS solutions as well if available.
I cannot add the border to the container class itself. It must strictly be added to the <section> tag. (This is possibly due to WordPress loops duplicating the container multiple times, leading CSS to recognize it as a single container).