title: Unable to override CSS pseudo element :before
body: <p>I have couple of unordered list items which specify the rule for password and use the font awesome to display an icon in front of all list items, when i click on the button i have javascript call that check if rule satisfy or not, based on the condition i have to change the font awesome icon , see below code</p>
  
  <pre><code> li {
          position: relative;
          padding-left: 20px;
          margin-bottom: 10px;
      }
      li:before {
          position: absolute;
          top: 0;
          left: 0;
          font-family: FontAwesome;
          content: "\f056";
          color: dimgray;
      }
  
      .myClass{
          position: absolute;
          top: 0;
          left: 0;
          font-family: FontAwesome !important;
          content: "\f058" !important;
          color: forestgreen;
      }
  </code></pre>
  
  <p>to override <code>li:before</code> i have the fallowing code</p>
  
  <pre><code>$("#limsg").addClass("myClass");
  </code></pre>
  
  <p>what should i be doing to get different font awesome icon at runtime?</p>