Selecting and manipulating CSS pseudo-elements such as before and after using javascript or jQuery

Question

Is there any way to select manipulate CSS pseudo-elements such as   before and   after  and the old version with one semi-colon  using jQuery  For example  my stylesheet has the following rule   span  after  content  foo     How can I change  foo  to  bar  using vanilla JS or jQuery

User · Accepted Answer

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

User · Answer

You may create a fake property or use an existing one and inherit it in the pseudo-element s stylesheet    x000D   x000D  var switched   false  x000D   x000D     Enable color switching x000D  setInterval function      x000D      var color   switched    red     darkred   x000D      var element   document getElementById  arrow    x000D      element style backgroundColor   color  x000D       x000D         Managing pseudo-element s css x000D         using inheritance  x000D      element style borderLeftColor   color  x000D       x000D      switched    switched  x000D     1000   x000D   arrow   x000D         SET FICTIONAL PROPERTY    x000D      border-left-color red  x000D       x000D      background-color red  x000D      width 1em  x000D      height 1em  x000D      display inline-block  x000D      position relative  x000D    x000D   arrow after   x000D      border-top 1em solid transparent  x000D      border-right 1em solid transparent  x000D      border-bottom 1em solid transparent  x000D      border-left 1em solid transparent  x000D       x000D         INHERIT PROPERTY    x000D      border-left-color inherit  x000D       x000D      content     x000D      width 0  x000D      height 0  x000D      position absolute  x000D      left 100   x000D      top -50   x000D    x000D   lt span id  arrow  class  arrow  gt  lt  span gt  x000D   x000D   x000D    It seems it doesn t work for  content  property

User · Answer

Here is the HTML    lt div class  icon  gt     lt span class  play  gt        before    lt  span gt   lt  div gt    Computed style on  before  was content   VERIFY TO WATCH    Here is my two lines of jQuery  which use the idea of adding an extra class to specifically reference this element and then appending a style tag  with an  important tag  to changes the CSS of the sudo-element s content value      span play eq 0    addClass  G        body   append   lt style gt  G before content  NewText   important  lt  style gt

User · Answer

Although they are rendered by browsers through CSS as if they were like other real DOM elements  pseudo-elements themselves are not part of the DOM  because pseudo-elements  as the name implies  are not real elements  and therefore you can t select and manipulate them directly with jQuery  or any JavaScript APIs for that matter  not even the Selectors API   This applies to any pseudo-elements whose styles you re trying to modify with a script  and not just   before and   after   You can only access pseudo-element styles directly at runtime via the CSSOM  think window getComputedStyle     which is not exposed by jQuery beyond  css    a method that doesn t support pseudo-elements either   You can always find other ways around it  though  for example    Applying the styles to the pseudo-elements of one or more arbitrary classes  then toggling between classes  see seucolega s answer for a quick example      this is the idiomatic way as it makes use of simple selectors  which pseudo-elements are not  to distinguish between elements and element states  the way they re intended to be used Manipulating the styles being applied to said pseudo-elements  by altering the document stylesheet  which is much more of a hack

User · Answer

Thank you all  i managed to do what i wanted  D http   jsfiddle net Tfc9j 42  here take a look  i wanted to have the opacity of an outer div to be different from the opacity of the internal div and that change with a click somwewhere    Thanks          ena   on  click   function                 head   append   lt style gt  ena before   opacity 0 3    lt  style gt                  duop   on  click   function  e                head   append   lt style gt  ena before   opacity 0 8    lt  style gt           e stopPropagation               ena      width 300px      height 300px      border 1px black solid      position relative     duo      opacity 1      position absolute      top 50px    width 300px      height 100px        background-color white     ena before       content  attr data-before       color  white      cursor  pointer      position  absolute      background-color red      opacity 0 9      width 100       height 100        lt div id  ena  gt       lt div id  duo  gt           lt p gt ena p lt  p gt           lt p id  duop  gt duoyyyyyyyyyyyyyy p lt  p gt        lt  div gt        lt  div gt

User · Answer

I m always adding my own utils function  which looks like this   function setPseudoElContent selector  value            document styleSheets 0  addRule selector   content       value             setPseudoElContent   class  after    Hello World       or make use of ES6 Features   const setPseudoElContent    selector  value    gt            document styleSheets 0  addRule selector   content     value          setPseudoElContent   class  after    Hello World

User · Answer

I have created a jQuery plugin to add css-pseudo rules like using  css   for specific elements    plugin code and test case is here use case as simple css image popup here   usage      body      css       backgroundColor   white          cssPseudo  after         content   attr title     you should try to hover the picture  then click it         position   absolute       top  20  left  20           cssPseudo  hover after         content    Now hover the picture  then click it

User · Answer

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   There are ways to manipulate these elements using JavaScript and or CSS workarounds  which one you use depends on your exact requirements     I m going to start with what s widely considered the  best  approach   1  Add remove a predetermined class  In this approach  you ve already created a class in your CSS with a different  after or  before style  Place this  new  class later in your stylesheet to make sure it overrides   p before       content   foo     p special before       content   bar       Then you can easily add or remove this class using jQuery  or vanilla JavaScript       p   on  click   function           this  toggleClass  special             x000D   x000D         p   on  click   function     x000D          this  toggleClass  special    x000D          x000D  p before   x000D    content   foo   x000D    color  red  x000D    cursor  pointer  x000D    x000D  p special before   x000D    content   bar   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt This is a paragraph  lt  p gt  x000D   lt p gt This is another paragraph  lt  p gt  x000D   x000D   x000D     Pros  Easy to implement with jQuery  quickly alters multiple styles at once  enforces separation of concerns  isolating your CSS and JS from your HTML  Cons  CSS must be pre-written  so the content of  before or  after isn t completely dynamic     2  Add new styles directly to the document s stylesheet  It s possible to use JavaScript to add styles directly to the document stylesheet  including  after and  before styles  jQuery doesn t provide a convenient shortcut  but fortunately the JS isn t that complicated   var str    bar   document styleSheets 0  addRule  p special before   content     str             x000D   x000D  var str    bar   x000D  document styleSheets 0  addRule  p special before    content       str          x000D  p before   x000D    content   foo   x000D    color  red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p class  special  gt This is a paragraph lt  p gt  x000D   lt p gt This is another paragraph lt  p gt  x000D   x000D   x000D     addRule   and the related  insertRule   methods are fairly well-supported today    As a variation  you can also use jQuery to add an entirely new stylesheet to the document  but the necessary code isn t any cleaner   var str    bar       lt style gt p special before content    str     lt  style gt    appendTo  head         x000D   x000D  var str    bar   x000D      lt style gt p special before content      str       lt  style gt    appendTo  head    x000D  p before   x000D    content   foo   x000D    color  red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p class  special  gt This is a paragraph lt  p gt  x000D   lt p gt This is another paragraph lt  p gt  x000D   x000D   x000D    If we re talking about  manipulating  the values  not just adding to them  we can also read the existing  after or  before styles using a different approach   var str   window getComputedStyle document querySelector  p      before                getPropertyValue  content         x000D   x000D  var str   window getComputedStyle    p   0     before   getPropertyValue  content    x000D  console log str   x000D   x000D  document styleSheets 0  addRule  p special before    content       str str          x000D  p before   x000D      content  foo   x000D      color  red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p class  special  gt This is a paragraph lt  p gt  x000D   lt p gt This is another paragraph lt  p gt  x000D   x000D   x000D    We can replace document querySelector  p   with    p   0  when using jQuery  for slightly shorter code    Pros  any string can be dynamically inserted into the style Cons  original styles aren t altered  just overridden  repeated  ab use can make the DOM grow arbitrarily large     3  Alter a different DOM attribute  You can also to use attr   in your CSS to read a particular DOM attribute   If a browser supports  before  it supports attr   as well   By combining this with content  in some carefully-prepared CSS  we can change the content  but not other properties  like margin or color  of  before and  after dynamically   p before       content  attr data-before       color  red      cursor  pointer      JS      p   on  click   function            this  attr  data-before   bar             x000D   x000D     p   on  click   function      x000D        this  attr  data-before   bar    x000D      x000D  p before   x000D      content  attr data-before   x000D      color  red  x000D      cursor  pointer  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt This is a paragraph  lt  p gt  x000D   lt p gt This is another paragraph  lt  p gt  x000D   x000D   x000D    This can be combined with the second technique if the CSS can t be prepared ahead of time   var str    bar    document styleSheets 0  addRule  p before    content  attr data-before          p   on  click   function            this  attr  data-before   str            x000D   x000D  var str    bar   x000D  document styleSheets 0  addRule  p before    content  attr data-before   important     x000D   x000D     p   on  click   function     x000D      this  attr  data-before   str   x000D      x000D  p before   x000D    content   foo   x000D    color  red  x000D    cursor  pointer  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt This is a paragraph  lt  p gt  x000D   lt p gt This is another paragraph  lt  p gt  x000D   x000D   x000D     Pros  Doesn t create endless extra styles Cons  attr in CSS can only apply to content strings  not URLs or RGB colors

User · Answer

In the line of what Christian suggests  you could also do      head   append   lt style gt  span  after  content  bar    lt  style gt

User · Answer

Someone else commented on appending to the head element with a full style element and that s not bad if you re only doing it once but if you need to reset it more than once you ll end up with a ton of style elements  So to prevent that I created a blank style element in the head with an id and replace the innerHTML of it like this    lt style id  pseudo  gt  lt  style gt    Then the JavaScript would look like this    var pseudo   document getElementById  pseudo     function setHeight         let height   document getElementById  container   clientHeight      pseudo innerHTML     class before   height    height px        setHeight     Now in my case I needed this to set the height of a before element based on the height of another and it will change on resize so using this I can run setHeight   every time the window is resized and it will  replace the  lt style gt  properly   Hope that helps someone who was stuck trying to do the same thing

User · Answer

This is not practical as i did not write this for real world uses  just to give you a example of what can be achieved    css     before  function elem attr     if     cust style       undefined       body   append   lt style gt      elem     before       attr        lt  style gt        else        cust style   remove       body   append   lt style gt      elem     before       attr        lt  style gt            after  function elem attr   if     cust style       undefined       body   append   lt style gt      elem     after       attr        lt  style gt         else       cust style   remove       body   append   lt style gt      elem     after       attr        lt  style gt              this currently add s a   or appends a Style element which contains your necessary attribute s which will take affect on the target element s after Pseudo element   this can be used as   css after  someElement    content   Test   position   absolute         editing   adding styles to  after   and   css before            to affect the before pseudo element    as after  and before  pseudo elements are not directly accessible through DOM it is currently not possible to edit the Specific values of the css freely   my way was just a example and its not good for practice  you can modify it try some of your own tricks and make it correct for real world usage   so do your own experimentation s with this and others   regards - Adarsh Hegde

User · Answer

You can t select pseudo elements in jQuery because they are not part of DOM  But you can add an specific class to the father element and control its pseudo elements in CSS   EXAMPLE  In jQuery    lt script type  text javascript  gt         span   addClass  change     lt  script gt    In CSS   span change after   content   bar

User · Answer

We can also rely on custom properties  aka CSS variables  in order to manipulate pseudo-element  We can read in the specification that   Custom properties are ordinary properties  so they can be declared on any element  are resolved with the normal inheritance and cascade rules  can be made conditional with  media and other conditional rules  can be used in HTML   s style attribute  can be read or set using the CSSOM  etc   Considering this  the idea is to define the custom property within the element and the pseudo-element will simply inherit it  thus we can easily modify it  1  Using inline style   x000D   x000D   box before     content var --content  I am a before element      color var --color  red     font-size 25px    x000D   lt div class  box  gt  lt  div gt   lt div class  box  style  --color blue --content  I am a blue element   gt  lt  div gt   lt div class  box  style  --color black  gt  lt  div gt   lt div class  box  style  --color  f0f --content  another element   gt  lt  div gt  x000D   x000D   x000D   2  Using CSS and classes  x000D   x000D   box before     content var --content  I am a before element      color var --color  red     font-size 25px      blue     --color blue    --content  I am a blue element      black     --color black    x000D   lt div class  box  gt  lt  div gt   lt div class  box black   gt  lt  div gt   lt div class  box blue  gt  lt  div gt  x000D   x000D   x000D   3  Using javascript  x000D   x000D  document querySelectorAll   box   0  style setProperty  --color    blue    document querySelectorAll   box   1  style setProperty  --content     I am another element     x000D   box before     content var --content  I am a before element      color var --color  red     font-size 25px    x000D   lt div class  box  gt  lt  div gt   lt div class  box  gt  lt  div gt  x000D   x000D   x000D   4  Using jQuery  x000D   x000D      box   eq 0  css  --color    blue       the css   function with custom properties works only with a jQuery vesion  gt   3 x    with older version we can use style attribute to set the value  Simply pay    attention if you already have inline style defined          box   eq 1  attr  style   --color  f0f    x000D   box before     content  I am a before element     color var --color  red     font-size 25px    x000D   lt script src  https   code jquery com jquery-3 3 1 min js  gt  lt  script gt   lt div class  box  gt  lt  div gt   lt div class  box  gt  lt  div gt   lt div class  box  gt  lt  div gt  x000D   x000D   x000D    It can also be used with complex values   x000D   x000D   box     --c  content     --b linear-gradient red blue     --s 20px    --p 0 15px      box before     content  var --c     background var --b     color  fff    font-size  calc 2   var --s    5px     padding var --p     x000D   lt div class  box  gt  lt  div gt  x000D   x000D   x000D   You may notice that I am considering the syntax var --c value  where value is the default value and also called the fallback value  From the same specification we can read   The value of a custom property can be substituted into the value of another property with the var   function  The syntax of var   is    var     var   lt custom-property-name gt      lt declaration-value gt         The first argument to the function is the name of the custom property to be substituted  The second argument to the function  if provided  is a fallback value  which is used as the substitution value when the referenced custom property is invalid   And later   To substitute a var   in a property   s value     If the custom property named by the first argument to the var   function is animation-tainted  and the var   function is being used in the animation property or one of its longhands  treat the custom property as having its initial value for the rest of this algorithm  If the value of the custom property named by the first argument to the var   function is anything but the initial value  replace the var   function by the value of the corresponding custom property  Otherwise  if the var   function has a fallback value as its second argument  replace the var   function by the fallback value  If there are any var   references in the fallback  substitute them as well  Otherwise  the property containing the var   function is invalid at computed-value time    If we don t set the custom property OR we set it to initial OR it contains an invalid value then the fallback value will be used  The use of initial can be helpful in case we want to reset a custom property to its default value  Related How to store inherit value inside a CSS variable  aka custom property   CSS custom properties  variables  for box model

User · Answer

x000D   x000D       span   attr  data-txt    foo    x000D              span   click function      x000D             this  attr  data-txt   any other text    x000D             x000D   span  x000D    x000D   span after   x000D    content  attr data-txt   x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div class  span  gt  lt  div gt  x000D   x000D   x000D

User · Answer

IF you want to to manipulate the   before or   after sudo elements entirely through CSS  you could do it JS  See below   jQuery  head   append   lt style id  mystyle  type  text css  gt     your styles here     lt  style gt       Notice how the  lt style gt  element has an ID  which you can use to remove it and append to it again if your style changes dynamically   This way  your element is style exactly how you want it through CSS  with the help of JS

User · Answer

Why adding classes or attributes when you can just append a style to head     head   append   lt style gt  span after  content  changed content    lt  style gt

User · Answer

You can use my plugin for this purpose   JQuery    x000D   x000D   function     x000D      pseudoElements     x000D      length  0 x000D       x000D   x000D    var setPseudoElement   function parameters    x000D      if  typeof parameters argument      object      parameters argument     undefined  amp  amp  parameters property     undefined     x000D        for  var element of parameters elements get      x000D          if   element pseudoElements  element pseudoElements     x000D            styleSheet  null  x000D            before    x000D              index  null  x000D              properties  null x000D               x000D            after    x000D              index  null  x000D              properties  null x000D               x000D            id  null x000D             x000D   x000D          var selector    function     x000D            if  element pseudoElements id     null    x000D              if  Number element getAttribute  data-pe--id        element pseudoElements id  element setAttribute  data-pe--id   element pseudoElements id   x000D              return   data-pe--id      element pseudoElements id            parameters pseudoElement  x000D              else   x000D              var id     pseudoElements length  x000D                pseudoElements length   x000D   x000D                element pseudoElements id   id  x000D              element setAttribute  data-pe--id   id   x000D   x000D              return   data-pe--id      id            parameters pseudoElement  x000D               x000D                x000D   x000D          if   element pseudoElements styleSheet    x000D            if  document styleSheets 0     x000D              element pseudoElements styleSheet   document styleSheets 0   x000D              else   x000D              var styleSheet   document createElement  style    x000D   x000D              document head appendChild styleSheet   x000D              element pseudoElements styleSheet   styleSheet sheet  x000D               x000D             x000D   x000D          if  element pseudoElements parameters pseudoElement  properties  amp  amp  element pseudoElements parameters pseudoElement  index    x000D            element pseudoElements styleSheet deleteRule element pseudoElements parameters pseudoElement  index   x000D             x000D   x000D          if  typeof parameters argument      object     x000D            parameters argument     extend     parameters argument   x000D   x000D            if   element pseudoElements parameters pseudoElement  properties  amp  amp   element pseudoElements parameters pseudoElement  index    x000D              var newIndex   element pseudoElements styleSheet rules length    element pseudoElements styleSheet cssRules length    element pseudoElements styleSheet length  x000D   x000D              element pseudoElements parameters pseudoElement  index   newIndex  x000D              element pseudoElements parameters pseudoElement  properties   parameters argument  x000D               x000D   x000D            var properties       x000D   x000D            for  var property in parameters argument    x000D              if  typeof parameters argument property       function   x000D                element pseudoElements parameters pseudoElement  properties property    parameters argument property     x000D              else x000D                element pseudoElements parameters pseudoElement  properties property    parameters argument property   x000D               x000D   x000D            for  var property in element pseudoElements parameters pseudoElement  properties    x000D              properties    property          element pseudoElements parameters pseudoElement  properties property       important     x000D               x000D   x000D            element pseudoElements styleSheet addRule selector  properties  element pseudoElements parameters pseudoElement  index   x000D            else if  parameters argument     undefined  amp  amp  parameters property     undefined    x000D            if   element pseudoElements parameters pseudoElement  properties  amp  amp   element pseudoElements parameters pseudoElement  index    x000D              var newIndex   element pseudoElements styleSheet rules length    element pseudoElements styleSheet cssRules length    element pseudoElements styleSheet length  x000D   x000D              element pseudoElements parameters pseudoElement  index   newIndex  x000D              element pseudoElements parameters pseudoElement  properties       x000D               x000D   x000D            if  typeof parameters property      function   x000D              element pseudoElements parameters pseudoElement  properties parameters argument    parameters property    x000D            else x000D              element pseudoElements parameters pseudoElement  properties parameters argument    parameters property  x000D   x000D            var properties       x000D   x000D            for  var property in element pseudoElements parameters pseudoElement  properties    x000D              properties    property          element pseudoElements parameters pseudoElement  properties property       important     x000D               x000D   x000D            element pseudoElements styleSheet addRule selector  properties  element pseudoElements parameters pseudoElement  index   x000D             x000D           x000D   x000D        return   parameters elements   x000D        else if  parameters argument     undefined  amp  amp  parameters property     undefined    x000D        var element     parameters elements  get 0   x000D   x000D        var windowStyle   window getComputedStyle  x000D          element         parameters pseudoElement x000D          getPropertyValue parameters argument   x000D   x000D        if  element pseudoElements    x000D          return   parameters elements  get 0  pseudoElements parameters pseudoElement  properties parameters argument     windowStyle  x000D          else   x000D          return windowStyle    null  x000D           x000D        else   x000D        console error  Invalid values     x000D        return false  x000D         x000D       x000D   x000D      fn cssBefore   function argument  property    x000D      return setPseudoElement   x000D        elements  this  x000D        pseudoElement   before   x000D        argument  argument  x000D        property  property x000D          x000D       x000D      fn cssAfter   function argument  property    x000D      return setPseudoElement   x000D        elements  this  x000D        pseudoElement   after   x000D        argument  argument  x000D        property  property x000D          x000D       x000D        x000D   x000D    function     x000D        element   cssBefore  content     New before      x000D      x000D   element   x000D    width  480px  x000D    margin  0 auto  x000D    border  2px solid red  x000D    x000D   x000D   element  before   x000D    content   Old before    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div class  element  gt  lt  div gt  x000D   x000D   x000D    The values should be specified  as in the normal function of jQuery css  In addition  you can also get the value of the pseudo-element parameter  as in the normal function of jQuery css   console log    element  cssBefore parameter         JS    x000D   x000D   function     x000D    document pseudoElements     x000D      length  0 x000D       x000D   x000D    var setPseudoElement   function parameters    x000D      if  typeof parameters argument      object      parameters argument     undefined  amp  amp  parameters property     undefined     x000D        if   parameters element pseudoElements  parameters element pseudoElements     x000D          styleSheet  null  x000D          before    x000D            index  null  x000D            properties  null x000D             x000D          after    x000D            index  null  x000D            properties  null x000D             x000D          id  null x000D           x000D   x000D        var selector    function     x000D          if  parameters element pseudoElements id     null    x000D            if  Number parameters element getAttribute  data-pe--id        parameters element pseudoElements id  parameters element setAttribute  data-pe--id   parameters element pseudoElements id   x000D            return   data-pe--id      parameters element pseudoElements id            parameters pseudoElement  x000D            else   x000D            var id   document pseudoElements length  x000D            document pseudoElements length   x000D   x000D              parameters element pseudoElements id   id  x000D            parameters element setAttribute  data-pe--id   id   x000D   x000D            return   data-pe--id      id            parameters pseudoElement  x000D             x000D              x000D   x000D        if   parameters element pseudoElements styleSheet    x000D          if  document styleSheets 0     x000D            parameters element pseudoElements styleSheet   document styleSheets 0   x000D            else   x000D            var styleSheet   document createElement  style    x000D   x000D            document head appendChild styleSheet   x000D            parameters element pseudoElements styleSheet   styleSheet sheet  x000D             x000D           x000D   x000D        if  parameters element pseudoElements parameters pseudoElement  properties  amp  amp  parameters element pseudoElements parameters pseudoElement  index    x000D          parameters element pseudoElements styleSheet deleteRule parameters element pseudoElements parameters pseudoElement  index   x000D           x000D   x000D        if  typeof parameters argument      object     x000D          parameters argument    function     x000D            var cloneObject   typeof parameters argument pop      function             x000D   x000D            for  var property in parameters argument    x000D              cloneObject property    parameters argument property   x000D               x000D   x000D            return cloneObject  x000D                x000D   x000D          if   parameters element pseudoElements parameters pseudoElement  properties  amp  amp   parameters element pseudoElements parameters pseudoElement  index    x000D            var newIndex   parameters element pseudoElements styleSheet rules length    parameters element pseudoElements styleSheet cssRules length    parameters element pseudoElements styleSheet length  x000D   x000D            parameters element pseudoElements parameters pseudoElement  index   newIndex  x000D            parameters element pseudoElements parameters pseudoElement  properties   parameters argument  x000D             x000D   x000D          var properties       x000D   x000D          for  var property in parameters argument    x000D            if  typeof parameters argument property       function   x000D              parameters element pseudoElements parameters pseudoElement  properties property    parameters argument property     x000D            else x000D              parameters element pseudoElements parameters pseudoElement  properties property    parameters argument property   x000D             x000D   x000D          for  var property in parameters element pseudoElements parameters pseudoElement  properties    x000D            properties    property          parameters element pseudoElements parameters pseudoElement  properties property       important     x000D             x000D   x000D          parameters element pseudoElements styleSheet addRule selector  properties  parameters element pseudoElements parameters pseudoElement  index   x000D          else if  parameters argument     undefined  amp  amp  parameters property     undefined    x000D          if   parameters element pseudoElements parameters pseudoElement  properties  amp  amp   parameters element pseudoElements parameters pseudoElement  index    x000D            var newIndex   parameters element pseudoElements styleSheet rules length    parameters element pseudoElements styleSheet cssRules length    parameters element pseudoElements styleSheet length  x000D   x000D            parameters element pseudoElements parameters pseudoElement  index   newIndex  x000D            parameters element pseudoElements parameters pseudoElement  properties       x000D             x000D   x000D          if  typeof parameters property      function   x000D            parameters element pseudoElements parameters pseudoElement  properties parameters argument    parameters property    x000D          else x000D            parameters element pseudoElements parameters pseudoElement  properties parameters argument    parameters property  x000D   x000D          var properties       x000D   x000D          for  var property in parameters element pseudoElements parameters pseudoElement  properties    x000D            properties    property          parameters element pseudoElements parameters pseudoElement  properties property       important     x000D             x000D   x000D          parameters element pseudoElements styleSheet addRule selector  properties  parameters element pseudoElements parameters pseudoElement  index   x000D           x000D        else if  parameters argument     undefined  amp  amp  parameters property     undefined    x000D        var windowStyle   window getComputedStyle  x000D          parameters element         parameters pseudoElement x000D          getPropertyValue parameters argument   x000D   x000D        if  parameters element pseudoElements    x000D          return parameters element pseudoElements parameters pseudoElement  properties parameters argument     windowStyle  x000D          else   x000D          return windowStyle    null  x000D           x000D        else   x000D        console error  Invalid values     x000D        return false  x000D         x000D       x000D   x000D    Object defineProperty Element prototype   styleBefore     x000D      enumerable  false  x000D      value  function argument  property    x000D        return setPseudoElement   x000D          element  this  x000D          pseudoElement   before   x000D          argument  argument  x000D          property  property x000D            x000D        x000D        x000D    Object defineProperty Element prototype   styleAfter     x000D      enumerable  false  x000D      value  function argument  property    x000D        return setPseudoElement   x000D          element  this  x000D          pseudoElement   after   x000D          argument  argument  x000D          property  property x000D            x000D        x000D        x000D        x000D   x000D  document querySelector   element   styleBefore  content     New before      x000D   element   x000D    width  480px  x000D    margin  0 auto  x000D    border  2px solid red  x000D    x000D   x000D   element  before   x000D    content   Old before    x000D    x000D   lt div class  element  gt  lt  div gt  x000D   x000D   x000D      GitHub  https   github com yuri-spivak managing-the-properties-of-pseudo-elements

User · Answer

There are many answers here but no answer helps to manipulate the css of  before or  after   not even the accepted one   Here is how I propose to do it  Lets suppose your HTML is like this    lt div id  something  gt Test lt  div gt    And then you are setting its  before in CSS and designing it like    something before     content  1st      font-size 20px     color red     something    content  1st       Please notice I also set content attribute in element itself so that you can take it out easily later  Now there is a button clicking on which  you want to change the color of  before to green and its font-size to 30px  You can achieve that as follows   Define a css with your required style on some class  activeS     activeS before     color green  important     font-size 30px  important       Now you can change  before style by adding the class to your  before element as follows    lt button id  changeBefore  gt Change lt  button gt   lt script gt          changeBefore   click function                something   addClass  activeS             lt  script gt    If you just want to get content of  before  it can be done as    lt button id  getContent  gt Get Content lt  button gt   lt script gt          getContent   click function            console log     something   css  content      will print  1st           lt  script gt    Ultimately if you want to dynamically change  before content by jQuery  You can achieve that as follows    lt button id  changeBefore  gt Change lt  button gt   lt script gt      var newValue    22    coming from somewhere     var add     lt style gt  something before content    newValue    important   lt  style gt            changeBefore   click function               body   append add            lt  script gt    Clicking on above  changeBefore  button will change  before content of  something into  22  which is a dynamic value   I hope it helps

User · Answer

Here is the way to access  after and  before style properties  defined in css      Get the color value of  element before var color   window getComputedStyle      document querySelector   element      before    getPropertyValue  color        Get the content value of  element before var content   window getComputedStyle      document querySelector   element      before    getPropertyValue  content

User · Answer

I made use of variables defined in  root inside CSS to modify the  after  the same applies to  before  pseudo-element  in particular to change the background-color value for a styled anchor defined by  sliding-middle-out hover after and the content value for another anchor   reference  in the following demo that generates random colors by using JavaScript jQuery   HTML   lt a href     id  changeColor  class  sliding-middle-out  title  Generate a random color  gt Change link color lt  a gt   lt span id  log  gt  lt  span gt   lt h6 gt     lt a href  https   stackoverflow com a 52360188 2149425  id  reference  class  sliding-middle-out  target   blank  title  Stack Overflow topic  gt Reference lt  a gt   lt  h6 gt   lt script type  text javascript  src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script type  text javascript  src  https   cdn rawgit com davidmerfield randomColor master randomColor js  gt  lt  script gt    CSS   root       --anchorsFg   0DAFA4    a  a visited  a focus  a active       text-decoration  none      color  var --anchorsFg       outline  0      font-style  italic       -webkit-transition  color 250ms ease-in-out      -moz-transition  color 250ms ease-in-out      -ms-transition  color 250ms ease-in-out      -o-transition  color 250ms ease-in-out      transition  color 250ms ease-in-out     sliding-middle-out       display  inline-block      position  relative      padding-bottom  1px     sliding-middle-out after       content          display  block      margin  auto      height  1px      width  0px      background-color  transparent       -webkit-transition  width 250ms ease-in-out  background-color 250ms ease-in-out      -moz-transition  width 250ms ease-in-out  background-color 250ms ease-in-out      -ms-transition  width 250ms ease-in-out  background-color 250ms ease-in-out      -o-transition  width 250ms ease-in-out  background-color 250ms ease-in-out      transition  width 250ms ease-in-out  background-color 250ms ease-in-out     sliding-middle-out hover after       width  100       background-color  var --anchorsFg       outline  0     reference     margin-top  20px     sliding-middle-out before     content  attr data-content     display  attr data-display       JS jQuery  var anchorsFg   randomColor         sliding-middle-out    hover function             root    css   --anchorsFg    anchorsFg              reference    hover   function          this  attr  data-content    Hello World    attr  data-display    block   html           function          this  attr  data-content    Reference   attr  data-display    inline   html

User · Answer

one working but not very efficient way is to add a rule to the document with the new content and reference it with a class  depending on what is needed the class might need an unique id for each value in content       lt style type  text css  gt span id-after after content bar   lt  style gt    appendTo    head        span   addClass  id-after

User · Answer

I have something different stuff for you which is easy and effective        lt style gt        case-after after      set your properties here like eg           color  3fd309  important                 case-before before      set your properties here like eg           color  151715  important            lt  style gt       case for after         button-id   on  click   function                 target-div   toggleClass  case-after                     case for before         button-id   on  click   function                 target-div   toggleClass  case-before

[javascript] Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to jquery-selectors

Examples related to pseudo-element