我怎么能把一个:后伪元素为兄弟元素的容器?

Question

我有这个HTML代码，我不应该编辑。

我需要从css中得到一个解决方案，在这个图像中有一些东西，

https://i.stack.imgur.com/qEWVW.jpg

，其中添加了一个黑色矩形，该矩形包含:" columbia "以及"南美"。我知道解决方案是使用pseudo-elements像:after，但我是新的CSS话题，我不知道如何做到这一点。

谢谢你的帮助，我很乐意学习。

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

首先，列表元素<li>上的list-style: none声明没有任何作用。它应该被添加到无序列表<ul>样式块。

由于图片中没有红色，我猜你想保留它。下面是一个使用伪元素的解决方案。具体来说，使用::after元素并将黑盒定位在标志<img>的正下方。然后定位"哥伦比亚";还有"南美"。使用position: relative将它们移动到您想要的图像对齐方式。

既然你使用了标题元素<h3>作为"哥伦比亚"文本，它的font-size和font-weight将比文本"south america"的<div>更大。你可以给它们设置相似的字体大小和字体粗细，使它们看起来"相似"。除非你想要一个不匹配的尺寸外观。

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

要在不改变html的情况下完成这个任务是一个相当大的挑战，但我认为我做到了(至少在代码依赖中它是有效的)。我无法使li::after工作，但我添加了黑色背景的"南美";文本，这很好。下面是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;
}