Question

我有这种模式的元素（XML，而不是HTML，但CSS应该仍然有效）：

<expan abbr="XX">YY</expan>

有时我想在输出中看到“YY”，有时我想看“XX”。当我想看到“YY”而不是属性值时没问题：只需保持原样。没问题，如果我想看到元素内容和属性值：这一点CSS做到了：

      expan:after {content:attr(abbr);}

将显示＆lt; vast abbr =“XX”＆gt; YY＆lt; / expan＆gt;作为“YYXX”。

但是：问题如果我想看到属性值而不是元素内容 - 也就是说，如果我想看到“XX”。我可以使用CSS显示或可见性来隐藏元素＆lt; expand＆gt;。但它隐藏了一切，包括：after伪元素。所以，这段代码：

      expan:after {content:attr(abbr);}

      expan {display:none;}

根本不显示任何内容。

所以，好民众......帮助。这似乎是一件非常明显的事情。当然，我可以用Javascript轻松操作DOM。但由于各种原因，我没有这个选择。我想用简单的CSS做到这一点。我可以吗？

Answer 1

你必须使用某种类型的hack，其中元素仍然存在，但只有伪元素（:after）对用户可见。一个例子是color。如果你知道它只是文本，那么你可以在主元素上设置color到transparent，并在伪元素上设置为真实颜色。你仍然有一个空白的空间来处理，但你可以在父元素上使用position: relative并在伪元素上使用position: absolute来修复它，因为伪元素是主元素的子元素。请注意文本仍然存在，但只有用鼠标突出显示它才会看到它。这也是可修复的::selection，但它仍然可以随意复制，而::select仅适用于现代浏览器。

这是一个演示我的意思的演示：DEMO

编辑：这个应该使用它周围的文字，但你必须增加width才能添加更多文字：DEMO

适用于Chrome和Firefox。

Answer 2

一个部分解决方案是将展开font-size设置为0，将:before内容font-size设置为所需的尺寸：

expan:before {
    content: attr(name);
    font-size: 15px;
}
expan {
    font-size: 0;
}

尝试将:before font-size设置为100％无效。

CSS显示元素属性值，而不是元素内容

2 个答案: