How to add ::after in the HTML link tag


Tags: html,css,css3,pseudo-element

Problem :

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 :

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


    CSS Howto..

    how to make css contents like boxes, text as center?

    How to get CSS styling to shown on page? [closed]

    [SOLVED]How to generate dynamic external link?

    How to parse the default css property to inline style attribute

    How to apply css transform on iOS without using -webkit-transform?

    How to apply CSS styles only to the text-content of a block-level element?

    How can I solve this :before or :after issue in IE7?

    css: how to make circles connected by lines responsive with bootstrap?

    How to rotate Images in HTML using CSS in FireFox..? [duplicate]

    How to align both these elements in same line?

    How to add a gradient/filter in the image in CSS

    How to change accordion css to plain white?

    CSS how to automatically resize div size?

    how to resize images inside a div inside another div with css?

    How to give space between each tab in the navigation using Jquery and CSS

    How do I post a jsfiddle example of some trouble I'm seeing in Rails?

    How to hide text behind image

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    How to change the Color of dynamically created divs on click event, who are having same class?

    How to print outlines and background colors from css, when using JQuery printElement, and IE8?

    jason lewis basset did not show icons well in laravel 4

    How to set width of container with two div's [closed]

    How to remove the vertical white line between the two green divs without floating?

    How to Set Up a Responsive Background-Image with CSS

    How to always make page content appear beneath navigation bar?

    How to align contents in different containers using only css

    How to add the css properties to an image in ImageResourceCell of CellTable

    How can I move a div with direction in JavaScript?

    CSS only - how to have a scrolling ul with all li on one line

    How to remove the dots from custom menu with CSS