Trying to change CSS of pseudoclass adding a class

Trying to change CSS of pseudoclass adding a class

Dear experts,

I'm a jQuery and css beginner and I'm trying to learn it by doing. Now I have a problem, which I'm not able to solve so any help would be very appreciated.
As I looked for a solution for changing css with jquery adressing a pseudo element I found this article: https://forum.jquery.com/topic/changing-css-of-after-pseudoclass . I tried to transfer this solution to my following code, but with no success (and please be not too hard with me, I'm really a beginner ;-) ):

CSS:
  1. nav.main-nav a.home:after,
  2. nav.main-nav li > span.home:after {
  3. position:relative;
  4. display:block;
  5. margin:0;
  6. padding:2px 0 0;
  7. font:1em/1 typicons;
  8. color:#000;
  9. text-indent:0;
  10. content: "\e08a"; }

  12. a.home.test:after,
  13. span.home.test:after {
  14. position:relative;
  15. display:block;
  16. margin:0;
  17. padding:2px 0 0;
  18. font:1em/1 typicons;
  19. color:#000;
  20. text-indent:0;
  21. content: "\e089"; }
JQuery:
  1. $('nav.main-nav a.home').addClass('.test');
  2. $('nav.main-nav li > span.home').addClass('.test');
What is wrong with the syntax if I only want to change the behavior of this child.

Thanks for any helpful hints

Fortunox