我有一个使用
CSS3创建的HTML标记.我想’突出’一个特定的标签.理想情况下,我希望标签周围有一个发光,表明它是活跃的.我正在使用’：after’来创建标签的形状,但这不允许我突出显示实际形状.
这是一个小提琴：
http://jsfiddle.net/nocztpxv/2/
HTML
@H_404_7@<a href="#" class="tag"> InsertHTML </a>CSS
@H_404_7@.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作为样式目的,我们只能使用额外的嵌套级别：
@H_404_7@<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转换属性)：
@H_404_7@.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); }