Highlighting a tag using CSS

Question

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.

Here's a Fiddle: 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?

Answer 1

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.

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/

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>

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