title: colon in sass, not sure how to reference in HTML
body: <p>The code below is not applying the CSS rule <code>clearfix: after</code> I have never used a CSS rule with a colon in the middle so I don't know why it is not working, any help.</p>
  <p>I have the following code in my SCSS file</p>
  <pre class="lang-css prettyprint-override"><code>.clearfix { zoom: 1;}
  .clearfix:before, .clearfix:after {
    content: &quot;&quot;;
    display: table;
  }
  .clearfix:after { clear: both; }
  </code></pre>
  <p>and the following is my html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;sidebar1&quot; class=&quot;sidebar fourcol first clearfix:after&quot; role=&quot;complementary&quot;&gt;
  
    &lt;?php if ( is_active_sidebar( 'sidebar1' ) ) : ?&gt;
  
      &lt;?php dynamic_sidebar( 'sidebar1' ); ?&gt;
  
    &lt;?php else : ?&gt;
  
      &lt;!-- This content shows up if there are no widgets defined in the backend. --&gt;
  
      &lt;div class=&quot;alert help&quot;&gt;
        &lt;p&gt;&lt;?php _e(&quot;Please activate some Widgets.&quot;, &quot;bonestheme&quot;);  ?&gt;&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;?php endif; ?&gt;
  
  &lt;/div&gt;
  </code></pre>