隐藏元素中的文本节点,但不隐藏子元素

Question

我有一点CSS的麻烦,似乎无法找到解决方案.我有这个HTML

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

现在我想隐藏文本«单击关闭»,不隐藏div,也不隐藏其中的链接.

可以这样做吗？

Answer 1

visibility可以在子元素上覆盖该属性,因此您可以执行以下操作:

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

CSS:

#closelink {
    visibility:collapse;
}

#closelink a{
    visibility:visible;
}

结果如下:http://jsfiddle.net/pavloschris/Vva84/

Answer 2

.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}

Answer 3

尝试

#closelink {
  position: relative;
  left: -9999px;
}

#closelink a {
  position: relative;
  left: 9999px;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>