Access the css after selector with jQuery

Question

I have the following css    pageMenu  active  after       content          margin-top  -6px      display  inline-block      width  0px      height  0px      border-top  14px solid white      border-left  14px solid transparent      border-bottom  14px solid white      position  absolute      right  0      I d like to change the border-width of the top  left  and bottom border using jQuery  What selector to I use to access this element  I tried the following but it doesn t seem to be working       pageMenu  active after   css                         border-top-width    22px                border-left-width    22px                border-right-width    22px

User · Answer

If you use jQuery built-in after   with empty value it will create a dynamic object that will match your  after CSS selector       active   after   click function          alert  clickable           See the jQuery documentation

User · Answer

You can t manipulate  after  because it s not technically part of the DOM and therefore is inaccessible by any JavaScript  But you can add a new class with a new  after specified   CSS    pageMenu  active changed after       this selector is more specific  so it takes precedence over the other  after        border-top-width  22px      border-left-width  22px      border-right-width  22px      JS       pageMenu  active   toggleClass  changed        UPDATE  while it s impossible to directly modify the  after content  there are ways to read and or override it using JavaScript  See  Manipulating CSS pseudo-elements using jQuery  e g   before and  after   for a comprehensive list of techniques

User · Answer

You can add style for  after a like html code  For example   var value   22  body append   lt style gt  wrapper after border-top-width      value    px   lt  style gt

[jquery] Access the css ":after" selector with jQuery

Examples related to jquery

Examples related to css

Examples related to jquery-selectors