Linking ::after element on multiple slideshow items...only first one works

Question

I have a slideshow and for each slideshow I have an ::after element like this:

.views-field.views-field-title .field-content:after {
    content: url('../images/myimage.svg');
    position: absolute;
    margin-left: -21px;
    margin-top: -30px;
}

I want to create a link for the element but only the first link works, it doesn't work on subsequent slideshow items.

  $('.views-field.views-field-title .field-content').after().click(function () {
   window.location.href = "http://www.example.com";
  });

Do i need to iterate over this using foreach?

score 0 · Answer 1 · edited May 23 '17 at 11:58

The after method is used for inserting content after the selected element(s).

$('h1').after('<p>Small text</p>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Big Text</h1>

You can't directly select pseudo elements since they aren't actual DOM elements. So you won't be able to make the :after content clickable, what you have "working" at the moment is you're inserting some dummy element and making it clickable.

In this case, you should replace the :after content with a proper DOM element (such as a <a> tag) and style that element accordingly.

Linking ::after element on multiple slideshow items...only first one works

1 Answers1