0

I'm dealing with a Wordpress site, so I have limited access to what I can add or not and where. I had to use :before and :after pseudo elements to add two arrow icons. these icons are supposed to achieve some scrolling in the div element they are part of when they are clicked.

<div class="thumbs-gallery">
  ::before
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  ::after
 </div>

The way this is set up, you can only see 2 thumbs as "thumbs-gallery" has a fixed height and an overflow set to auto.

.thumbs-gallery {
    width: 135px;
    float: right;
    margin-top: -601px;
    height: 506px;
    overflow: auto;
}

.thumbs-gallery::before {
    content: "";
    display: block;
    background: url('...') no-repeat;
    background-size: 37px 25px;
    width: 38px;
    height: 25px;
    position: absolute;
    left: 830px;
    top: -630px;
}

.thumbs-gallery::after {
    content: "";
    display: block;
    background: url('...') no-repeat;
    background-size: 37px 25px;
    width: 38px;
    height: 25px;
    position: absolute;
    left: 830px;
    top: -50px;
    -webkit-transform: rotate(180deg);
}

How can I target the before and after pseudo elements with JQuery and have it scroll the content inside of "thumbs-gallery" up and down?

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Sergi
  • 1,192
  • 3
  • 19
  • 37
  • You can't: pseudo-elements are not part of the DOM and therefore cannot be selected by JS (and therefore jQuery). You will need to create DOM elements for the previous and next buttons. – Terry Mar 24 '17 at 09:42
  • Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – Terry Mar 24 '17 at 09:42

0 Answers0