title: Style Radio Buttons with CSS3 ::before and ::after
body: <p>I am working on the front end of a web project. To fit the design of the website, I want my radio buttons to look like these:</p>
  
  <p><img src="https://i.stack.imgur.com/jtzJM.png" alt="nice radio buttons"></p>
  
  <p>So I headed over to <a href="http://css-tricks.com/almanac/selectors/a/after-and-before/" rel="nofollow noreferrer">this nice article</a> and started reading, so that I may implement this myself. I have gone ahead and created the three icons above in illustrator and saved them to my web project.</p>
  
  <p><strong>HTML CODE:</strong></p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="radio"&gt;
          &lt;input type="radio" class="radio-btn" name="person" id="radio-btn-james" value="James" checked&gt;
          &lt;label for="radio-btn-james"&gt;James&lt;/label&gt;
      &lt;/div&gt;&lt;!-- .radio --&gt;
  
      &lt;div class="radio"&gt;
          &lt;input type="radio" class="radio-btn" name="person" id="radio-btn-michael" value="Michael"&gt;
          &lt;label for="radio-btn-michael"&gt;Michael&lt;/label&gt;
      &lt;/div&gt;&lt;!-- .radio --&gt;
  
      &lt;div class="radio"&gt;
          &lt;input type="radio" class="radio-btn" name="person" id="radio-btn-andy" value="Andy"&gt;
          &lt;label for="radio-btn-andy"&gt;Andy&lt;/label&gt;
      &lt;/div&gt;&lt;!-- .radio --&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS CODE:</strong></p>
  
  <pre><code>section {
      padding: 50px;
  }
  
  /* RADIO BUTTON STYLING */
  
  .radio-btn {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
  }
  
  .radio-btn {
      position: absolute;
      clip: rect(0, 0, 0, 0);
      clip: rect(0 0 0 0);
  }
  
  .radio-btn,
  .radio-btn + label::before {
      content: url('radio_unchecked.png');
  }
  
  .radio-btn:checked + label::before {
      content: url('radio_checked.png');
  }
  
  .radio-btn:hover,
  .radio-btn:hover + label::before {
      content: url('radio_hover.png');
  }
  
  .radio label {
      padding-left: 20px;
  }
  </code></pre>
  
  <p>But I'm getting weird behavior! I have created a <a href="http://jsfiddle.net/txDG6/5/" rel="nofollow noreferrer">JSFiddle</a> of what I have.</p>
  
  <p><strong>PROBLEMS:</strong></p>
  
  <ol>
  <li>Radio buttons won't tick (icon doesn't change).</li>
  <li>As I hover, icon changes for the wrong radio button, not the one I hovered over!</li>
  </ol>