Replace anonymous content but not child elements

Question

I have a parent container that has some text (anonymous block) and a child element (a div or a pseudo-element). I am taking a look to the Image Replacement Museum but am not sure about what is the best solution for my case.

I need to hide the text and still display the inner div.

<div class="parent">
   Some text
   <!--<div class="child">
   </div>-->
</div>

.parent {
    display:table;
}
.child,
.parent:after {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}
.parent:after {
    content: "Icon";
}

How can I hide "Some text" maintaining my child element in the flow (so no position:absolute; child should resize the parent) and vertically/horizontally centered?

Note: the only size I know is the width of the child; all the other measures should be flexible and assumptions should not be made.

[EDIT] I need to maintain the support for screen readers so that the original text would be still read.

Moreover wrapping the text in an element is not always possible for me (I would like a CSS solution).

Answer 1

Given the contraints, I suspect font-size:0 on the parent and a font-size:1rem reset on the child would be optimal.

.parent {
  display: table;
  border: 1px solid grey;
  font-size: 0;
  margin-bottom: 1rem;
}
.child,
.pseudo:after {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 1rem;
  padding: 1em;
  background: lightblue;
}
.pseudo:after {
  content: "Icon";
}

<div class="parent pseudo">
  Some text
  <!--<div class="child">
   </div>-->
</div>

<div class="parent">
  Some text
  <div class="child">Child
  </div>
</div>

Answer 2

You can't. You need to wrap the text in a tag like span or that you want.

<div class="parent">
   <span>Some text</span>
   <div class="child">
   </div>
</div>

.parent {
    display:table;
}
.parent > span {
    visibility : hidden;
}
.child {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}