使用 CSS 突出显示标签

Question

我有一个使用 CSS3 创建的 HTML 标签。我想“突出显示”一个特定的标签。理想情况下，我想在标签周围发光，表明它处于活动状态。我正在使用 ':after' 创建标签的形状，但这不允许我在实际形状周围突出显示。

这是一个小提琴： http://jsfiddle.net/nocztpxv/2/

HTML

<a href="#" class="tag">
    InsertHTML
</a>

CSS

.active{
    border: 1px solid rgb(246, 255, 0);    
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6);
}

如您所见，除箭头/三角形部分外，所有内容都被突出显示。有谁知道我如何在箭头/三角形周围也有相同的突出显示？

Answer 1

我能想到一种解决方案，但需要对您的 DOM 稍作修改。解决方案是将链接文本包装在<span> 元素中，然后我们将使用旋转矩形来实现该效果，而不是使用三角形边框。但是，由于 z-index 中的背景必须高于旋转矩形，因此需要嵌套（因此我们在 <span> 元素上声明了蓝色背景。

在此处查看小提琴：http://jsfiddle.net/teddyrised/nocztpxv/6/ 对于堆栈的 3D 可视化，请参阅此处：http://jsfiddle.net/teddyrised/nocztpxv/8/

由于只有两个可能的伪元素，并且您已经将::before 和::after 用于样式目的，因此我们只能使用额外的嵌套级别：

<a href="#" class="tag">
    <span>InsertHTML</span>
</a>
<a href="#" class="tag active">
    <span>InsertHTML</span>
</a>
<a href="#" class="tag">
    <span>InsertHTML</span>
</a>

对于 CSS（注意：您可能希望将供应商前缀添加到 CSS 转换属性）：

.tag {
    font-family: Helvetica, Arial, sans-serif;
    display: inline-block;
    color: #fff;
    position: relative;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin: 0 30px 0 0;
    text-decoration: none;
}

/* The rotated square */
.tag::after {
    background-color: #588fe5;
    display: block;
    height: 27px;
    width: 27px;
    position: absolute;
    top: 6px;
    right: -13px;
    content: "";
    transform: rotate(45deg);
    z-index: 1;
}

/* Nested span */
.tag > span {
    display: inline-block;
    background-color: #588fe5;
    position: relative;
    padding: 10px;
    z-index: 2;
}

/* The white dot */
.tag > span::before {
    background: #fff;
    width: 10px;
    height: 10px;
    content: "";
    display: inline-block;
    border-radius: 20px;
    margin: 0 5px 0 0;
}

/* Hover effects */
.tag:hover::after, .tag:hover > span {
    background-color: #739fe4;
}

/* Active tag */
.tag.active, .tag.active::after {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6);
}