我可以防止CSS属性Content覆盖min-height属性吗？

Question

我正在使用Dragula在我的某些MVC视图上实现拖放。

有时，源区域或目标区域将为空。

在其中任何一个为空的情况下，我想显示一个最小高度和带有虚线边框的“占位符”，并带有文本“ Drop Here ...”，以使用户在视觉上更清楚地知道要做什么。

我在父级上添加了一个名为CheckEmpty的类，并在CSS中添加了

.CheckEmpty:empty::after {
min-height:4em;
background-color:lightcyan;
border:dashed 2px #D9D9D9;
border-radius: 5px;  
content: "Drop Here...";
}

但是，问题在于content属性似乎覆盖了最小高度，并且边框仅包围了文本。删除content属性可以使CSS以正确的最小高度正确显示占位符，并且还可以填充容器的宽度。

是否有防止这种情况发生的方法，或者我需要从另一个角度解决这个问题？

Answer 1

这与content无关，而与::after无关！ ::after破坏了Dragula中所有有关大小的样式。因此，最好不要使用简单的CSS after并通过代码或直接在HTML标签中添加内容：

.CheckEmpty {
    min-height:4em;    
    background-color:lightcyan;
    border:dashed 2px #D9D9D9;
    border-radius: 5px;     

}

(".CheckEmpty").html("Drop Here2...");

https://jsfiddle.net/ou46nedb/4/

Answer 2

我从来没有只使用CSS来工作过，所以最后回到使用javascript检查div是否为空并应用所需的CSS类。