CSS:在从HTML中读取动态值之前或之后.没有JS.纯CSS

Question

您好，感谢您阅读本文。

首先，我不得不说我不会使用JavaScript。我不会大声说出任何需要"维护"的代码，因为我们为数百名内部客户运行数百个网站。强烈反对任何需要维护的代码。我试着后退，但没有成功。我没有力量。

话虽如此，我有一个客户希望有图标来表示主题，当你滚动图标时，会在所述图标上覆盖一个文本，说明主题是什么。

例如，如果有"水果"这个主题，就会有一个水果(比如香蕉(的照片。当鼠标滚动到香蕉图片上时，会出现一个覆盖，中间有单词"水果"。

这与覆盖或图标无关。

我想知道的是，我是否可以在中读取主题名称，并将其显示在：after伪元素中。

在伪代码中，这就是我想要做的：

<div class="topic-icon><img src="icon-image"></div>
<div class="topic-label>Fruit</div>

假装CSS:

.topic-icon:after {content: '[Topic Label]'};

我在Drupal工作，可以根据需要设置HTML。我能插入这样的主题标签吗：

<div class="topic-icon" topic="Fruit"><img src=....></div>

使用CSS类似于：

.topic-icon:after {content: '[Topic]'};

我希望我能把自己说清楚。

让我知道这样的事情是否可能。

Answer 1

您可以使用:hover::after选择器设置伪类，使用attr(topic)的content

.topic-icon {
position: relative;
display: inline-block;
}
.topic-icon:hover::after {
content: attr(topic);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

background-color: rgba(0, 0, 0, 0.5);
color: white;
}

<div class="topic-icon" topic="Fruit">
<img src="https://cdn.iconscout.com/icon/free/png-256/banana-1624204-1375362.png" width="64" height="64">
</div>