如何通过伪元素显示元素的属性值，同时使用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 中适用于我。

Answer 2

一个部分解决方案是将扩展

font-size

设置为 0，并将

:before

内容

font-size

设置为所需的大小：

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

尝试将

:before

font-size

设置为 100% 不起作用。

Answer 3

您只能在 ::before 和 ::after 伪元素上设置 'content:' 属性。 但您可以做的只是在两个单独的属性中提供both您的文本，如下所示：

<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); }
}

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