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).

score 1 · Answer 1 · answered Nov 24 '15 at 15:05

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>

answered Nov 24 '15 at 15:05

Paulie_D

107,962
13
142
161

Thanks, I was currently experimenting with that in fact. But I've read around that **setting the font-size to zero is bad**. But I am not sure whether it is just a dogma or it has valid reasons. – Kamafeather Nov 24 '15 at 16:18
Depends on what you mean by "bad". Your reading should tell you why but you 've added constraints that obviate other options really. – Paulie_D Nov 24 '15 at 16:20

score 0 · Answer 2 · answered Nov 24 '15 at 14:24

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;
}

Replace anonymous content but not child elements

2 Answers2