以视觉方式隐藏内容，而不是伪内容 [英] Visually hide content but not pseudo content

问题描述

我使用这样的模式通过：之前或：之后添加图标伪内容： / p>

 < span class =icon icon__example is-content-visually-hidden>辅助文字< / span> 
 

如何隐藏辅助文字而不隐藏 .icon 伪内容？不应该看到辅助文本或其占据的空间，使得这些图标可以内联使用。当 .is-content-visually-hidden 被关闭时，文本应该可见。我尝试了 text-indent：-9999px 等各种技术无效。

这个codepen演示了问题 。

解决方案

简单的方法是将内部文本的 font-size 设置为 0 然后将伪元素字体重置为正常，以使其可见：

  .is-content-visualization-hidden {
 font-size：0; 
} 
 
 .icon__star :: before {
 content：*; 
 font-size：32px; 
} 
  

演示：http://codepen.io/anon/pen/zxWQRX

但是更灵活的方法是将文本换行成一个跨度：

 < i class =icon icon__star is-content-visually-hidden> 
< span>星级< / span> 
< / i> 
  

并隐藏 span >

I'm using a pattern like this to add icons via :before or :after pseudo content:

<span class="icon icon__example is-content-visually-hidden">assistive text</span>

How can I visually hide the assistive text without hiding .icon pseudo content? Neither the assistive text or the space it occupies should be seen at all, such that these icons can be used inline. When.is-content-visually-hidden is toggled off then the text should be visible. I tried various techniques such as text-indent: -9999px to no avail.

This codepen demonstrates the problem.

解决方案

The simple approach is to set inner text's font-size to 0 and then reset pseudo-element font to normal again to make it visible:

.is-content-visually-hidden {
  font-size: 0;
}

.icon__star::before {
  content: "*";
  font-size: 32px;
}

Demo: http://codepen.io/anon/pen/zxWQRX

However more flexible approach is to wrap text into one more span:

<i class="icon icon__star is-content-visually-hidden">
  <span>star</span>
</i>

and hide span only.

这篇关于以视觉方式隐藏内容，而不是伪内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！