I am using Dragula to implement Drag and Drop on some of my MVC views.

There will be times when either the source or target areas will be empty.

In the case where either is empty, I would like to show a 'placeholder' with a min-height and dashed border with the text "Drop Here..." to make it visually clearer for the user what to do.

I added a class called CheckEmpty on the parent, and in CSS added:

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

```

The problem though is that the content property seems to override the min-height and the border surrounds the text only. Removing the content property allows the CSS to display the placeholder correctly with the correct min-height and it also fills the width of the container.

[![Incorrect](https://i.stack.imgur.com/AYI3g.png)](https://i.stack.imgur.com/AYI3g.png)

[![Without Text](https://i.stack.imgur.com/xGHoS.png)](https://i.stack.imgur.com/xGHoS.png)

Is there a way to prevent this from happening or do I need to tackle this from a different angle?