清洁解决方案

Question

是否有隐藏元素内容的方法，但保持其:before内容可见？说我有以下代码：

HTML：

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

CSS：

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

我试过了：

使用display: none并在display: inline上设置:before，但两者仍然隐藏
使用width: 0; overflow: hidden;，但似乎添加了额外的空格（？）
使用color：transparent;，但当然，span的内容仍占用空间
使用text-indent: -....px，但是
1. 这是搜索引擎和
2. 似乎不适用于span元素（？）

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

Answer 1

清洁解决方案

您可以使用visibility: hidden，但使用此解决方案时，隐藏的内容仍会占用空间。如果这对您无关紧要，您可以这样做：

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

Hackish Alternative Solution

另一种解决方案是将span ~~的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.

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

*此帖子的先前版本建议将字体大小设置为零。但是，这在某些浏览器中无法正常工作，因为CSS没有定义预期的行为when the font-size is set to zero。对于跨浏览器兼容性，请使用如上所述的小字体。

Answer 2

为了获得更好的浏览器支持：

将应隐藏在其他span元素中的文本换行，并将类应用于该范围以隐藏您希望隐藏的文本。

HTML：

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

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

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

此解决方案的优点：

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

在此处查看此行动：http://jsfiddle.net/tinystride/A9SSb/

Answer 3

基于@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; 
    }
}

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

Answer 4

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

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

span {
    font-size: 0;
}

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

Answer 5

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

所以另一种想法可能是使用jquery，用类div清空标记hidetext内的html内容，而不影响css的content。示例代码可以是：

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

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

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

5 个答案:

清洁解决方案

Hackish Alternative Solution