html - 表格行后的css三 Angular 形

我想在html表格的当前选定行之后添加一个箭头（或“三角形”）（以突出显示所选内容，而不是使用背景颜色更改）。

三角形应面向左，例如“
我已经设法将一个类添加到当前选定的行中，我认为其余的操作只能在CSS中完成，但我无法做到。

小提琴：http://jsfiddle.net/j95f8met/

这是突出显示行的脚本：

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

这是我的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;
}

最佳答案

“内容”必须解决您的问题;）

content: '';

http://jsfiddle.net/j95f8met/3/