悬停上的伪元素造型

Question

我用伪元素创建了一个类似丝带的标签。这是密码。

JSfiddle实例

​

.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;	
}
.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伪元素的左边框的颜色：

更新演示

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

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

请注意，在CSS选择器中，伪元素出现在末尾(在伪类之后)。