I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.

```css
.buttonSML {
    background-position:-35px -432px;
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    font-size: 2.9rem;
    font-weight: @font-bold;
    height: 55px;
    padding: 0 5px;
    position: relative;
    .text-shadow(0,0,4px);
    cursor: pointer;
}

.buttonSML:before, .buttonSML:after {
    content: " ";
    position: absolute;
    top: 0;
    height: 55px;
    width: 20px;
    display: inline-block;
    visibility: visible
}

.buttonSML:before {
    background-image: url('../images/sprite.png');
    background-position: 0px -432px;
    background-repeat: no-repeat;
    background-color: transparent;
    left: -20px;
}

.buttonSML:after {
    background: url('../images/sprite.png');
    background-position: -394px -432px;
    background-repeat: no-repeat;
    background-color: transparent;
    right: -20px;
}

```

Added a jsfiddle so you can see the end result <http://jsfiddle.net/7D4kG/1/>

Not really sure what up so would appreciate any advice you guys can provide.