Add gradient to pseudo element

Question

how can i apply the yellow gradient to the white arrow?

here is the fiddle link: http://jsfiddle.net/VNnKR/

$('.white').hover(function() {
$(this).addClass('gradient');
})

Answer 1

I found a solution, note that it only works with a solid background.

HTML:

<div class="arrow">
    START HERE!
</div>

CSS:

body {
    background: #6cc5c3;
}
.arrow {
    margin-top: 150px;
    position: relative;
    font-weight: bold;
    margin-bottom: 5px;
    height: 20px;
    padding: 10px 30px 10px 10px;
    width: 140px;
    color: #6cc5c3;
    background: #fff;
    text-align: center;
}
.arrow:after {
    content:'';
    height: 0;
    width: 0;
    display: block;
    border-color: #6cc5c3 #6cc5c3 #6cc5c3 transparent;
    border-width: 20px;
    border-style: solid;
    position: absolute;
    top: 0;
    right: -20px;
}

.gradient {
    background: #ffe632;
    background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
    background: -moz-linear-gradient(top, #fffe8d, #f6d23e);
}

DEMO

The arrow is transparent, and the rest of the "arrow" is the same as the body background color.