Highlighting a tag using CSS - html

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