javascript - 疑似要素にグラデーションを追加する

Question

白い矢印に黄色のグラデーションを適用するにはどうすればよいですか?

ここにフィドルリンクがあります： http://jsfiddle.net/VNnKR/

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

Answer 1

私は解決策を見つけました。それは無地の背景でのみ機能することに注意してください。

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);
}

デモ

矢印は透明で、残りの「矢印」は本体の背景色と同じです。