how can I put a :after pseudo element as the container for sibling elements? - css

Question

I have this HTML code that I should NOT edit.
I need a solution from css to have something like in this image,
https://imgur.com/DbPheOW
where a black rectangle is added, which contains the texts of: "Colombia" and "South america". I know that the solution is done using pseudo-elements like :after, but I'm new to this CSS topic and I don't know how to do it.
I appreciate your help, and I will be happy to learn.
img{
width:300px;
height:300px;
}
li{
list-style:none;
}
li:after{
content:'';
position:absolute;
width:100%;
height:100%;
background:black;
}
<ul class="offers">
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Colombia.svg" alt="">
<h3 class="country">colombia</h3>
<div class="continent_ubication">south <span class="text_continent" >america</span></div>
</li>
</ul>

Answer 1

First off, the list-style: none declaration you have on the list element <li> doesn't have any effect. It should added to the unordered list <ul> style block.
As the picture doesn't include the red color, I assume you wanted to keep that. Here is a solution using pseudo elements. Specifically, using the ::after element and positioning the black box right underneath the flag <img>. Then positioning the "colombia" and "south america" text using position: relative to move them into the alignment you wanted in the image.
Since your using a heading element <h3> for the "colombia" text it will have a larger font-size and font-weight than the <div> with text "south america". You could give them both similar font sizes and font weights to make them look "alike" unless you were going for a mismatched size appearance.
img{
width:300px;
height:300px;
}
ul {
list-style: none;
}
/* Make <h3> and child <div> have same font-size and weight (remove this if you want them to be different size) */
ul li h3,
ul li div {
font-size: 1.25rem;
font-weight: 400;
}
ul li .country {
position: relative;
color: #fff;
z-index: 99;
top: -5rem;
left: 4.5rem;
}
ul li .continent_ubication {
position: relative;
color: #2E86C1;
z-index: 99;
left: 7.5rem;
bottom: 4.5rem;
}
li:after{
content: "";
position: absolute;
top: 15rem;
width: 300px;
height: 110px;
z-index: 5;
background-color: black;
}
<ul class="offers">
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Flag_of_Colombia.svg" alt="Flag of Colombia">
<h3 class="country">colombia</h3>
<div class="continent_ubication">south <span class="text_continent" >america</span></div>
</li>
</ul>

Answer 2

That was quite a challenge to accomplish this without changing the html, but I think I did it (at least in codepen it works). I wasn't able to make it work with li::after, but I added the black background to the "South America" text and that worked fine. Here is the CSS:
img{
width:300px;
height:300px;
}
h3 {
color: white;
position: absolute;
z-index: 2;
top: 180px;
left: 60px;
}
li{
list-style:none;
position: relative;
}
.continent_ubication,
.text-continent {
color: lightblue;
position: absolute;
z-index: 1;
background: black;
width: 160px;
height: 60px;
padding-left: 140px;
padding-top: 80px;
top: 170px;
}