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

Question

我有这种模式的元素(XML，不是 HTML，但 CSS 应该仍然有效):

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

有时我想在输出中看到“YY”，有时我想看到“XX”。当我想看到“YY”而不是属性值时没问题:保持原样即可。如果我想同时查看元素内容和属性值，没问题:这段 CSS 可以做到这一点:

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

将 YY 显示为“YYXX”。

但是:如果我想查看属性值而不是元素内容，问题就来了——也就是说，如果我只想查看“XX”。我可以使用 CSS 显示或可见性来隐藏元素 。但它隐藏了一切，包括 :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。