css triangle after table row - html

Question

I would like to add an arrow (or "triangle") after the current selected row of a html table (to highlight what is selected, rather than using a background color change).
The triangle should be facing left, like this '<'.
I have managed to add a class to the current selected row, and I think the rest can be done in css only, but I haven't been able to do it.
Fiddle: http://jsfiddle.net/j95f8met/
Here is the script to highlight the row:
document.querySelector('table').onclick = highlight;
function highlight(e) {
e = e || event;
var from = findrow(e.target || e.srcElement),
highlighted = /highlighted/i.test((from || {}).className);
if (from) {
var rows = from.parentNode.querySelectorAll('tr');
for (var i = 0; i < rows.length; i += 1) {
rows[i].className = '';
}
from.className = !highlighted ? 'highlighted' : '';
}
}
function findrow(el) {
if (/tr/i.test(el.tagName)) return el;
var elx;
while (elx = el.parentNode) {
if (/tr/i.test(elx.tagName)) {
return elx;
}
}
return null;
}
Here is my CSS:
tr.highlighted td {
background: red;
}
tr.highlighted:after {
border-bottom: 60px solid transparent;
border-left: 60px solid green;
border-top: 60px solid transparent;
height: 0;
width: 0;
float:right;
}

Answer 1

'Content' must fix your problem ;)
content: '';
http://jsfiddle.net/j95f8met/3/

Answer 2

You need to set the content attribute on the :after pseudo-element.
Why this is required you can read below this question: Why do pseudo-elements require a content property?
So, technically, you could also add content: "\003c"; and you will get the character (less-than) <. This can be used to replace the borders you have set to create the triangle.
To style the < character you can then use font-family, color, font-size etc.
To place the < character more appropriate you can work with CSS positioning.
Hope this helps.