Getting long CSS elements and changing them with jQuery (i.e. ::before, :after, :first-child) .

Question

So I have this CSS query here:

last-ns > .col-2:first-child > a::before {
  content: "";
  border-left: 1px solid #aaa;
  position: absolute;
  height: 448px;
  left: 5px;
}

I want to use jQuery to adjust the height value of that specific a::before element; however, I have no idea how to grab that using jQuery...

I'm used to the typical jQuery form of changing CSS:

$("p").css ({
    "background-color": "yellow", "font-size": "200%"
});

But I am unsure how to change more complex CSS queries such as my last-ns > .col-2:first-child > a::before.

Any idea how to do this? Any help is appreciated. Thanks.

edit

My overall goal is to extend the height of that element when a separate element is clicked.

In one of the answers to that question it says: `You'd think this would be a simple question to answer, with everything else that jQuery can do. Unfortunately, the problem comes down to a technical issue: css :after and :before rules aren't part of the DOM, and therefore can't be altered using jQuery's DOM methods.` — allicarn, Dec 01 '15 at 19:03
Since :after and :before aren't part of the DOM, couldn't you just append a class (someClassName) to this anchor (however you are triggering the adjusting of the height, hover perhaps?) and then have your someClasName::before CSS already in place? Then the opposite trigger to simply remove that class? — JesseEarley, Dec 01 '15 at 19:09

score -1 · Answer 1 · answered Dec 01 '15 at 20:28

Dunno if this helps you, but... instead of manipulating styles in jQuery add custom class to DOM and move your changes to css.

JS:

$('.last-ns > .col-2:first-child > a').addClass('foo');

CSS:

.last-ns > .col-2:first-child > a.foo::before {
    border-color: red;
}

1 Answers1