Question

我有一个像使用伪元素创建的功能区的标记。这是代码。

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

<强> Updated demo

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

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

请注意，在CSS选择器中，伪元素到达末尾（在伪类之后）。

在悬停上设置伪元素的样式

1 个答案: