Welcome and thank you for taking the time to read this.
Firstly, I want to mention that I am unable to utilize JavaScript. It is against our policy to use any code that requires ongoing maintenance due to the large number of websites we manage for numerous clients internally. Any code that needs regular upkeep is strongly discouraged, and despite my attempts to advocate otherwise, I do not have the authority to change this.
That being said, one of our clients has requested the inclusion of icons to represent different topics. The idea is that when a user hovers over an icon, there will be an overlay displaying the text associated with that particular topic.
For example, if the topic is 'Fruit', there would be an image of a banana representing it. When the mouse hovers over the banana image, an overlay with the word 'Fruit' would appear in the center.
The focus here is not on the overlay or the icon itself.
My question is whether it is possible to retrieve the topic name and display it in the :after pseudo-element:
<div class="topic-icon><img src="icon-image"></div>
<div class="topic-label>Fruit</div>
In hypothetical code, this is what I am attempting to achieve:
.topic-icon:after {content: '[Topic Label]'};
I am working within Drupal and can adjust the HTML as required. Is it feasible to fetch the topic label in the following manner:
<div class="topic-icon" topic="Fruit"><img src=....></div>
Perhaps using CSS similar to the following:
.topic-icon:after {content: '[Topic]'};
I hope I have explained myself clearly.
Please let me know if implementing something like this is a viable option.