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:

![nice radio buttons](https://i.stack.imgur.com/jtzJM.png)

So I headed over to [this nice article](http://css-tricks.com/almanac/selectors/a/after-and-before/) 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.

**HTML CODE:**

```
<section>
    <div class="radio">
        <input type="radio" class="radio-btn" name="person" id="radio-btn-james" value="James" checked>
        <label for="radio-btn-james">James</label>
    </div><!-- .radio -->

    <div class="radio">
        <input type="radio" class="radio-btn" name="person" id="radio-btn-michael" value="Michael">
        <label for="radio-btn-michael">Michael</label>
    </div><!-- .radio -->

    <div class="radio">
        <input type="radio" class="radio-btn" name="person" id="radio-btn-andy" value="Andy">
        <label for="radio-btn-andy">Andy</label>
    </div><!-- .radio -->
</section>

```

**CSS 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;
}

```

But I'm getting weird behavior! I have created a [JSFiddle](http://jsfiddle.net/txDG6/5/) of what I have.

**PROBLEMS:**

1. Radio buttons won't tick (icon doesn't change).
2. As I hover, icon changes for the wrong radio button, not the one I hovered over!