使用CSS突出显示标记 [英] Highlighting a tag using CSS

问题描述

我有一个使用CSS3创建的HTML标记。我想突出显示一个特定的选项卡。理想情况下，我想在标签周围发光，表明它是活跃的。我使用'：after'来创建标签的形状，但这不允许我突出显示实际的形状。

I have an HTML tag I created using CSS3. I would like to 'highlight' a particular tab. Ideally, I'd like to have a glow around the tag that shows it is active. I'm using ':after' to create the shape of the tag, but this doesn't allow me to highlight around the actual shape.

这是一个小提琴：
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);
}

正如你所看到的， 。

As you can see, the highlight is around everything except the arrow/triangle part. Does anyone know how I could have the same highlighted look around the arrow/triangle as well?

推荐答案

有一个解决方案，我有一个解决方案，可以想到，但需要稍微修改你的DOM。解决方案是通过将链接文本包装在< span> 元素中，然后不使用三角形的边框，我们将使用旋转的矩形表示该效果。然而，由于背景在z-index中必须高于旋转矩形，所以需要嵌套（以便我们在< span> 上声明蓝色背景，

There is one solution that I can think of, but requires slight modification to your DOM. The solution is by wrapping the link text within a <span> element, and then instead of using borders for the triangle, we will use a rotated rectangle for that effect. However, since the background has to be higher up in the z-index than the rotated rectangle, nesting is needed (so that we declare the blue background on the <span> element instead.

请参阅fiddle here： http ：//jsfiddle.net/teddyrised/nocztpxv/6/ 对于堆栈的三维可视化，请参阅这里： http://jsfiddle.net/teddyrised/nocztpxv/8/

See fiddle here: http://jsfiddle.net/teddyrised/nocztpxv/6/ For a three-dimensional visualisation of the stack, see here: http://jsfiddle.net/teddyrised/nocztpxv/8/

由于只有两个伪元素可能， code> :: before 和 :: after 之后，我们只能使用额外的嵌套级别：

As there are only two pseudo-elements possible and you are using both ::before and ::after for stylistic purposes already, we can only use an additional level of nesting:

<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 transform属性）：

For the CSS (note: you might want to add vendor prefixes to the CSS transform property):

.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);
}

这篇关于使用CSS突出显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！