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

Question

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

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

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

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

会将 <expan abbr="XX">YY</expan> 显示为“YYXX”。

但是：如果我想查看属性值而不是元素内容，即如果我只想查看“XX”，则会出现问题。我可以使用 CSS 显示或可见性来隐藏元素 <expan>。但它隐藏了一切，包括 :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 中适用于我。