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的display或visibility来隐藏 <expan> 元素。 但是，它会把所有东西都隐藏，包括:after伪元素。所以，这段代码：

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

      expan {display:none;}

什么也没有显示。

那么，善良的伙计们...帮个忙吧。这似乎是非常显而易见的事情。当然，我可以通过使用 JavaScript 操作 DOM 来轻松完成它。但由于各种原因，我没有这个选项。我想用简单的 CSS 完成它。 我可以吗？

- peter

---

似乎在visibility中可以工作，但在IE中不行。你为什么需要这个呢？听起来你需要两个单独的元素，而不是abbr+after。 - nice ass

你尝试过使用before伪元素作为遮罩覆盖主元素或包含通常在主元素中的内容（YY）这样的技巧吗？ - user1981569

当然，我可以使用两个或更多元素。但是基于奥卡姆剃刀原则，我非常不愿意这样做。在Chrome中，可见性对我不起作用 - 你使用了什么值？ - peter

@Niall，这就是我的答案所做的：它隐藏并覆盖了主要元素。虽然不是完全可访问的，但它可以正常工作。 - Ian

Ian: 不行，和我下面提到的问题一样。试试用一个较长的<expan abbr="YY">XXXX</expan>单词：你最终会在单词中间留下一个空隙，在YY之前或之后：就像我说的那样丑陋。 - peter

Answer 1

您需要使用某种技巧，使元素仍然存在，但只有伪元素（:after）对用户可见。其中一个示例是 color。如果您知道它只是文本，则可以将主要元素的 color 设置为 transparent，并在伪元素上将其设置为实际颜色。您仍然需要处理空白空间，但是您可以通过将父元素设置为 position: relative，将伪元素设置为 position: absolute 来解决这个问题，因为伪元素是主元素的子元素。请注意，文本仍然存在，但是只有在用鼠标突出显示时才能看到它。这也是可以解决的，使用 ::selection，但它仍然可能会被意外复制，并且 ::select 仅适用于现代浏览器。

以下是演示，展示了我的意思：DEMO

编辑: 这个可以适用于周围有文本的情况，但是您需要增加width以便添加更多文本: DEMO

在Chrome和Firefox中可用。

- Ian

---

嗯，这几乎完美地运作了。是的，expan元素的内容看不见。而且，你可以在expan:before或expan:after中看到属性。但是——一个很大的但是——看不见的内容占据了浏览器窗口的空间。所以，如果expan元素出现在单词中间（这经常发生），你就会在单词中间多出一些空格。很难看。 - peter

刚刚用一个很长的<expan abbr="XX">YYYY</expan>单词测试了你的网站——结果出现了不好看的空格。除非缩写文本与扩展文本的长度完全相同，否则单词中间会出现不好看的空格。 - peter

你使用的是哪个浏览器？ - Ian

Ian：尝试调整宽度和左侧位置的值确实消除了间距 - 所以这对我正在尝试做的事情（作为编辑系统的“预览”视图 - 因此不是最终生产视图，我将拥有更多更好的技术）可能已经足够好了。因此，我投票支持这个最佳解决方案。在Chrome和Firefox中都可以正常工作。 - peter

看起来我用来托管图片的网站已经将它们删除了。 - Ian

@Ian 对不起，我记不清了，可能只是图片丢失了，但链接还是有效的。无论如何，感谢你编辑你的回答，我很快会删除我的评论。 - A.L

Answer 2

一种部分解决方案是将扩展font-size设置为0，然后将:before内容font-size设置为所需大小：

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

尝试将:before的font-size设置为100％并没有起作用。

- ChrisFreeman

Answer 3

您只能在 ::before 和 ::after 伪元素上设置 'content:' 属性。 但您可以将两个文本分别提供在两个不同的属性中，例如：

<div long-text="This is very long text" short-text="Short text">
   <!-- this part is empty -->
</div>

然后您的CSS可以像这样在它们之间切换：

.AltText::before { content:attr(long-text); }

@media screen and (max-width:1200px) {
  #HeaderTabContainer .AltText::before { content:attr(short-text); }
}

或者您可以使用第三个属性在它们之间进行切换。

- Jamin Grey