Могу ли я предотвратить, чтобы свойство CSS Content переопределяло свойство min-height?

Question

Я использую Dragula для реализации Drag and Drop в некоторых моих видах MVC.

Будут времена, когда исходная или целевая области будут пустыми.

В случае, если любой из них пуст, я хотел бы показать «заполнитель» с минимальной высотой и пунктирной рамкой с текстом «Drop Here ...», чтобы сделать визуально более понятным для пользователя, что делать.

Я добавил класс с именем CheckEmpty на родительский, а в CSS добавил:

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

Проблема, однако, заключается в том, что свойство содержимого, кажется, переопределяет минимальную высоту, а граница окружает только текст. Удаление свойства содержимого позволяет CSS правильно отображать заполнитель с правильной минимальной высотой, а также заполняет ширину контейнера.

Есть ли способ предотвратить это или мне нужно заняться этим под другим углом?

Answer 1

Я никогда не работал с CSS только потому, что в итоге вернулся к использованию javascript для проверки того, был ли div пустым, и к применению необходимого класса css.

Answer 2

Речь идет не о content, а о ::after! ::after уничтожает все стили о размере в Драгула. Поэтому лучше вместо after использовать простой CSS и добавлять контент по коду или напрямую в теги HTML:

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

}

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

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