Hide parent without hiding pseudo elements under it

While playing with some CSS stuff I came across a common issue of hiding an element without hiding its pseudo elements. So I a practical way to do that. But still it won't work in every situations.

1. First, works with text only.
2. Second, works with any plain background.
3. It hides, not remove it.

These are not the ways but the hacks you can say.

The first method is a method works for inline text and that kinds of situations only.

<div>Hello</div>

div:before{
content:'Before ';
color:#000;
}

Now according to above markup the output will be:

<div>Before Hello</div>

To hide Hello string from the element we can do:

div:before{
content:'Before ';
  color:#000 !important;
}
div{
  color:transparent;
}

Use rgba color codes if you want to animate the above stuff.
 
In this way plain text can be hidden. Well this is just a pretty hack to do that little kind of stuff. For a plain background container we can just do its background to transparent.

div{
background:#00cfff;
width:250px;
height:250px;
}
div:after{
content:'';
background:#222;
width:250px;
height:250px;
display:inline-block;
}

To hide it we can just change the background to transparent and if have any text then make its color to transparent too.

div.hide{
 background:transparent;
}

But still its a hack and doesn't work for every situations. I found it hence sharing it, If you have any better than this then comment and I'll update this article.