Can I use :focus or :hover to make it show another word?

HTML-CSS
1

I want to make a small easter egg so when a user clicks/hovers on a word it becomes another by using HTML CSS only, if that’s possible.

2

I think that you should to add the @keyframes rule.

3

Yes, wrap the word in an inline tag (eg <span>), and nested in that, have the word wrapped in another span + your hidden word, also wrapped in another span. Then can just use CSS to hide/show whichever one you want

<p>This is an <span><span>example</span><span>easter egg</span><span><p>

Example: https://codepen.io/sutor/pen/rNpaWZd

The example is a word in a paragraph, but this can work for any situation: just wrap each of your words in a tag, and wrap those in another one. Hide the easter egg one normally, then hide the normal one and show the easter egg one when some state changes (:hover being the one in the example).

1 Like
4

You can also use a pseudo-element with a content property.

<p>Opposites <span class="word"></span></p>

.word::before {
  position: relative;
  content: 'attract';
}

.word:hover::before {
  content: 'repel';
}

Although putting content inside CSS usually isn’t the best idea.

2 Likes
5

That’s awesome! Thanks.
Although, I am very new to HTML and CSS so I don’t really understand much about selectors. So I don’t really understand what the > are for.

1 Like
6

That worked easily! Why is content in CSS bad?

7

It is a child combinator.

Because content really belongs in the HTML and not CSS. The MDN article I linked to on the content property talks about it a bit.

It’s not a big deal with a single word.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.