hide element but not nested child with css only

Question

I have something like that in an AMP-Page (I cant change the structure as its given and !important is not possible for AMP):

<p class="test">hide me <a>show me</a></p>

How can I achieve hiding the html of the parent bot not the nested a-tag? I tried this without success:

.test{display:none;}
.test a{display:block;}

and also:

.test:not(a){display:none;}

Answer 1

You can use font-size?

.test {
  font-size: 0;
}

.test a {
  font-size: 16px;
}

<p class="test">hide me <a>show me</a></p>

Answer 2

Using hidden and visible properties it is possible.

.test {visibility: hidden;}
a {visibility: visible;}