css - 替换匿名内容但不替换子元素

Question

我有一个 parent 容器，其中包含一些文本(匿名 block )和一个 child 元素(一个 div 或一个 pseudo -元素)。我正在查看 Image Replacement Museum但我不确定什么是适合我的情况的最佳解决方案。

我需要隐藏文本并仍然显示内部 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";
}

我如何隐藏"Some text" 在流中维护我的子元素(所以没有position:absolute；子元素应该调整父元素的大小)并垂直/水平居中？

注意:我知道的唯一尺寸是 child 的宽度；所有其他措施都应该是灵活的，不应该做出假设。

[编辑]我需要维护对屏幕阅读器的支持，以便仍可阅读原始文本。

此外，将文本包装在一个元素中对我来说并不总是可行的(我想要一个 CSS 解决方案)。

Answer 1

考虑到这些限制，我怀疑父级上的 font-size:0 和子级上的 font-size:1rem 重置是最佳的。

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