Search code examples
css

CSS :after or :before reading dynamic values from HTML. No JS. Pure CSS

First off, I have to say that I can't use JavaScript. I am not allowed to use any code that needs 'upkeep' because we run hundreds of sites for hundreds of clients in-house clients. Any code that needs maintenance is highly discouraged. I've tried to push back and it's not working. I don't have the power.

With that said, I have a client that would like to have icons to represent topics and when you roll over the icon, there is an overlay over said icon with the text saying what the topic is.

For example, if there is the topic 'Fruit' there would be a photo representation of a fruit (say, a banana). When the mouse rolls over the banana pic, an overlay would appear with the word fruit in the middle.

This isn't about the overlay or the icon.

What I would like to know is if I can read read the topic name in and have that displayed in the :after pseudo element.

In pretend code, this is what I'm trying to do:

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

Pretend CSS:

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

I'm working in Drupal and can set up the HTML as needed. Would I be able to pull in the topic label like this:

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

With the CSS something like:

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

I hope I am making my self clear.

Let me know if something like this is even possible.

Solution

  • You may set up the pseudo class with :hover::after selector, with the content of attr(topic)

    .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>