onhover list items change particular styling

Hello fellow stackers,

I have the following situation where I do not know exactly how I can solve it. I have some list items, when onhover on a item or onclick, this item should look like this:

I have the following HTML code, but do not really know how I can solve this the best means of CSS3 (and not with images) because it contains arrowed corners:

<div class="select-items">
    <h4>Available items:</h4>
    <div class="select-row-item">
        <div class="select-row-item-inner">
            <div class="selectableRow" style="float: left;">First Item</div>
            <img class="arrowRight" src="images/right-arrow.png">
        </div>
    </div>              
    <div class="select-row-item">
        <div class="select-row-item-inner">
            <div class="selectableRow" style="float: left;">Second Item</div>
            <img class="arrowRight" src="images/right-arrow.png">
        </div>
    </div>                        
    <div class="select-row-item">
        <div class="select-row-item-inner">
            <div class="selectableRow" style="float: left;">Third Item</div>
            <img class="arrowRight" src="images/right-arrow.png">
        </div>
    </div>                       
</div>

Hope someone can help me with this.

DEMO: http://jsfiddle.net/murid/wv107qgo/

I took a bit of creative licence with sizes and colors, which you should be able to fix as you see fit, but it works nicely. The triangle on the right is done in pure CSS.

.select-items {
    width: 300px;
    border: 1px solid #eee;
    color: #444;
    font-family: Helvetica, Arial, 'sans-serif';
    padding: 10px 20px;
}

ul {
    padding: 0;    
}

ul li {
    list-style: none;
}

ul li a {
    text-decoration: none;
    color: #444;
    display: block;
    padding: 10px;
    font-size: 12px;
    position: relative;
    height: 16px;
}

ul li a:after {
    content:"";
    width:0;
    height:0;
    border-top:18px solid transparent;
    border-bottom:18px solid transparent;
    border-left:18px solid #fff;
    position: absolute;
    right: -18px;
    top: 0;
}

ul li a:hover {
    background-color: #69a0ff;
    color: #fff;
}

ul li a:hover:after {
    border-left:18px solid #69a0ff;
}

ul li a i.arrow {
    width: 6px;
    height: 10px;
    display: inline-block;
    float: right;
    background: url('http://s7.postimg.org/ze62pveef/arrow.png') right top no-repeat;
    background-size: 6px 20px;
}

ul li a:hover i.arrow {
    background-position: right bottom;
}

<div class="select-items">
    <ul>
        <li>
            <a href="">First Item <i class="arrow"></i></a>
        </li>
        <li>
            <a href="">Second Item <i class="arrow"></i></a>
        </li>
        <li>
            <a href="">Third Item <i class="arrow"></i></a>
        </li>
    </ul>
</div>