懸停時設置僞元素

Question

我有一個標籤，如使用僞元素創建的功能區。 這是代碼。

JSfiddle Example

.skills-tag { 
 
    font-size: 13px; 
 
    margin-right: 15px; 
 
    padding:2.5px 10px; 
 
    background:#e8e8e8; 
 
    color:#6e6e6e !important; 
 
    text-decoration:none; 
 
    -moz-border-radius-bottomleft:4px; 
 
    -webkit-border-bottom-left-radius:4px; 
 
    border-bottom-left-radius:4px; 
 
    -moz-border-radius-topleft:4px; 
 
    -webkit-border-top-left-radius:4px; 
 
    border-top-left-radius:4px; 
 
} 
 
.skills-tag:after { 
 
    margin-top: -2px; 
 
    content:""; 
 
    margin-left: 9px; 
 
    position:absolute; 
 
    width:0; 
 
    height:0; 
 
    border-color:transparent transparent transparent #e8e8e8; 
 
    border-style:solid; 
 
    border-width:12px 0 12px 12px; \t 
 
} 
 
.skills-tag:hover { 
 
    background: #ddd; 
 
}

<a href="#" class="skills-tag">Tag 1</a> 
 
<a href="#" class="skills-tag">Tag 2</a> 
 
<a href="#" class="skills-tag">Tag 3</a>

當我將鼠標懸停在元素上，我可以改變背景顏色的代碼，但我如何添加（在這種情況下邊界）的效果時，我徘徊在本地元素？

Answer 1

只是改變:after僞元素的左邊框的顏色以及：

Updated demo

.skills-tag:hover { 
    background: #ddd; 
} 

.skills-tag:hover:after { 
    border-left-color: #ddd; 
} 

注意，在CSS選擇器，僞元素來末（僞後 - 班）。