5

我有这种模式的元素（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来做。我可以吗？？

4

2 回答 2

4

您必须使用某种 hack，其中元素仍然存在，但只有伪元素 ( :after) 对用户可见。这方面的一个例子是color。如果您知道它只是文本，那么您可以在主元素上设置color为transparent，并在伪元素上将其设置为真实颜色。您仍然需要处理一个空白区域，但您可以position: relative在父元素和position: absolute伪元素上修复它，因为伪元素是主元素的子元素。请注意，文本仍然存在，但只有用鼠标突出显示它才能看到它。使用::selection也可以修复它，但它仍然可以意外复制，并且::select仅在现代浏览器中可用。

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

编辑：这个应该与它周围的文本一起使用，但你必须增加width以添加更多文本：DEMO

在 Chrome 和 Firefox 中为我工作。

于 2013-05-15T00:37:12.127 回答
2

一种部分解决方案是将 expan 设置font-size为 0 并将:before内容font-size设置为所需的大小：

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

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

于 2015-08-22T22:01:25.923 回答