使用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/有关堆栈的三维可视化,请参见此处: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);
}