Stylized list example

Code example for http://stackoverflow.com/questions/20758620/create-list-with-triangle-on-the-right-side-css

by Smaxx

HTML

<ul>
    <li>First element</li>
    <li>Second element</li>
    <li>Third element</li>
</ul>

CSS

li {
    background: rgb(0, 169, 148) linear-gradient(to right, rgb(148, 148, 148) 1%, rgb(84, 84, 84) 100%);
    position: relative;
    list-style-type: none; /* drop the bullets */
    color: white;
    font-family: Verdana, Arial, Helvetica;
    font-size: 15pt;
    padding: 5pt;
    padding-left: 10pt;
    line-height: 20pt;
    width: 200pt;
}

li:hover {
    background: rgb(0, 169, 148) linear-gradient(to right, rgba(0, 169, 148, 1) 1%, rgba(0, 84, 166, 1) 100%);
}

li + li {
    margin-top: 6pt; /* This is the spacing between the arrows */
}

li:after {
    content: "";
    border-left: .5em solid rgb(84, 84, 84); /* This width determines the arrows length */
    border-top: 15pt solid transparent; /* This width has to be 50% of 'line-height + padding-top + padding-bottom' */
    border-bottom: 15pt solid transparent; /* Same for this width */
    width: 0;
    height: 0;
    position: absolute;
    right: -.5em; /* This has to be the same value as 'border-left's width */
    top: 0;
}

li:hover:after {
    border-left: .5em solid rgb(0, 84, 166);
}