How to add ::after in the HTML link tag

Question

There is a CSS effect for the ::after element. For example:

.wrapper a:hover:after, footer.main-footer a:hover:after {
   background:#ff0000;
}

And in the Chrome developer console, I notice that there is some link tag has ::after inside, that will show the effect

<a href="test.com" data-term="event">Event::after</a>

While some does not have it

<a class="back-to-portfolio" href="test2.com">All</a>

That element does not show the effect. The problem is, how to add the ::after to the link tag or under what conditions the ::after will show?

Solution 1

Basically for the :after element to work or be present, the entire selector should be matched. In the below snippet you can see how only the a element which is a descendant of .wrapper element or a descendant of footer.main-footer element gets the :after element. The other a which is outside both the div.wrapper and footer.main-footer does not get the :after element.

Another thing to note is that pseudo-elements are generated only if content property is specified. So, in the below snippet, the :after element is generated only when the a is hovered.

.wrapper a:hover:after,
footer.main-footer a:hover:after {
  background: #ff0000;
}
/* just for demo */

.wrapper,
footer {
  position: relative;
  height: 40px;
}
.wrapper a:hover:after,
footer.main-footer a:hover:after {
  position: absolute;
  content: ''; /* this is important */
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
}

<div class='wrapper'>
  <a href="test.com" data-term="event">Event::after</a>
</div>
<footer class='main-footer'>
  <a href="test.com" data-term="event">Event::after</a>
</footer>

<a class="back-to-portfolio" href="test2.com">All</a>

On the other hand, in the following snippet the :after is present even when a is not hovered.

.wrapper a:after,
footer.main-footer a:after {
  background: #ff0000;
}
/* just for demo */

.wrapper,
footer {
  position: relative;
  height: 40px;
}
.wrapper a:after,
footer.main-footer a:after {
  position: absolute;
  content: ''; /* this is important */
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
}

<div class='wrapper'>
  <a href="test.com" data-term="event">Event::after</a>
</div>
<footer class='main-footer'>
  <a href="test.com" data-term="event">Event::after</a>
</footer>

<a class="back-to-portfolio" href="test2.com">All</a>

---

Coming to your question on why some anchor/link tags have the :after whereas some other others don't, the reason should be because the anchor/link tag which doesn't have the :after element does not match the selector which sets the content property.

(I assume the content property must be getting set somewhere in your page because you mentioned that it is showing up for some elements.)

Solution 2

Add content property like this:

.wrapper a:hover:after, footer.main-footer a:hover:after {
   width: 30px;
   height: 30px;
   background:#ff0000;
   content: "";
   display: inline-block;
}