Html 隐藏元素，但显示 CSS 生成的内容

Hide element, but show CSS generated content

提问by Jon Gjengset

Is there a way of hiding an element's contents, but keep its :beforecontent visible? Say I have the following code:

有没有办法隐藏元素的内容，但保持其:before内容可见？假设我有以下代码：

HTML:

HTML：

<span class="addbefore hidetext">You are here</span>

CSS:

CSS：

.addbefore:before {
    content: "Show this";
}
.hidetext {
    // What do I do here to hide the content without hiding the :before content?
}

I've tried:

我试过了：

• using display: noneand setting display: inlineon :before, but both are still hidden
• using width: 0; overflow: hidden;, but then additional space seems to be added (?)
• using color: transparent;, but then, of course, the content of the span still takes up space
• using text-indent: -....px, but
  1. this is frowned upon by search engines and
  2. it seems not to work for span elements (?)

• 使用display: none和设置display: inlineon :before，但两者仍然隐藏
• 使用width: 0; overflow: hidden;，但随后似乎添加了额外的空间（？）
• 使用颜色：透明；但是，当然，跨度的内容仍然占用空间
• 使用text-indent: -....px，但是
  1. 这是搜索引擎不赞成的，并且
  2. 它似乎不适用于跨度元素（？）

Any other ideas as to how I might do this?

关于我如何做到这一点的任何其他想法？

回答by anroesti

Clean Solution

清洁溶液

You could use visibility: hidden, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:

您可以使用visibility: hidden，但使用此解决方案，隐藏的内容仍会占用空间。如果这对你来说不重要，你会这样做：

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

---

---

Hackish Alternative Solution

黑客替代解决方案

Another solution would be to set the font-sizeof the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :beforecontent.

另一种解决方案是设置font-size跨度的归零* 到一个非常小的值。这种方法的优点：隐藏的内容不会占用任何空间。缺点：您将无法使用 em 或 % 等相对单位作为:before内容的字体大小。

span:before {
    content: "Lorem ";
    font-size: 16px;
    font-size: 1rem; /* Maintain relative font-size in browsers that support it */
    letter-spacing: normal;
    color: #000;
}

span {
    font-size: 1px;
    letter-spacing: -1px;
    color: transparent;
}

Example on jsfiddle.

jsfiddle 的例子。

Update (May 4, 2015):With CSS3, you can now use the rem(Root EM) unit to maintain relative font-sizes in the :beforeelement. (Browser support.)

更新（2015 年 5 月 4 日）：使用 CSS3，您现在可以使用rem(Root EM) 单元来维护:before元素中的相对字体大小。（浏览器支持。）

---

---

*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.

*这篇文章的先前版本建议将字体大小设置为零。但是，这在某些浏览器中无法正常工作，因为 CSS 没有定义当 font-size 设置为零时预期的行为。为了跨浏览器兼容性，请使用上面提到的小字体。

回答by tinystride

For better browser support:

为了更好的浏览器支持：

Wrap the text that should be hidden within an additional spanelement, and apply classes to that span to hide the text you wish to be hidden.

将应该隐藏在附加span元素中的文本包裹起来，并将类应用于该跨度以隐藏您希望隐藏的文本。

HTML:

HTML：

<span class="addbefore">
  <span class="visuallyhidden>This text will not show.</span>
</span>

CSS:

CSS：

.addbefore:before {
  content: "Show this";
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

The .visuallyhiddenclass used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

.visuallyhidden上面使用的类来自当前版本的HTML5 Boilerplate：https: //github.com/h5bp/html5-boilerplate/blob/master/css/main.css

The advantages of this solution:

该解决方案的优点：

• Semantic HTML
• Complete browser support
• No problems with tiny text like other small font-sizesolutions.
• The hidden content won't take up space

• 语义 HTML
• 完整的浏览器支持
• 像其他小font-size解决方案一样，小文本没有问题。
• 隐藏的内容不会占用空间

See it in action here: http://jsfiddle.net/tinystride/A9SSb/

在这里查看它的实际效果：http: //jsfiddle.net/tinystride/A9SSb/

回答by EoghanM

Building on @anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem;will not mess things up:

基于@anroesti 的出色技巧，如果您需要在字体大小和颜色方面的未知上下文中应用，这里有一个解决方案，即您不确定重置为color:black;font-size:1rem;是否不会把事情搞砸：

<span abbrev-content="Intl.">International</span>

@media only screen and (max-width: 700px) {  /* very narrow viewports */
    span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
    span[abbrev-content]::before { 
        content: attr(abbrev-content); 
        font-size: 1000em; 
        visibility: visible; 
    }
}

If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.

如果您的跨度内容是一个段落而不仅仅是一个单词，您可能还需要负字母间距。

回答by Brenden

I took a similar approach as suggested here with visibility, but that still has a content box.

我采用了与此处建议的类似方法visibility，但仍然有一个内容框。

My solution is to simply use font-sizeto hide the target text.

我的解决方案是简单地使用font-size隐藏目标文本。

span {
    font-size: 0;
}

span:before {
    font-size: 16px;
}

回答by Sotiris

I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4you will see that what is inside contentproperty of css, is wrapped by the element. So any manipulation of the element will affect the css contentalso.

我认为纯 css 和 html 是不可能的。查看此示例http://jsbin.com/efeco4，您将看到contentcss 的内部属性是由元素包装的。因此，对元素的任何操作也会影响 css content。

So an alternative thought could be to use jquery, to empty the html content inside tag divwith class hidetextwithout affect the contentof css. A sample code could be this:

所以另一种想法可能是使用jquery，在不影响css的情况下div用class清空标签内的html内容。示例代码可能是这样的：hidetextcontent

$('.hidetext').empty();

Example: http://jsbin.com/efeco4/2

示例：http: //jsbin.com/efeco4/2