我有一个使用
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.05) inset,0px 0px 8px rgba(255,252,14,0.6);
}
解决方法
我能想到一个解决方案,但需要对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.6);
}
