Html 表格行后的css三角形

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

---

三角形应该朝左，像这样““内容”必须解决您的问题；）

---

您需要在

：after

伪元素上设置

content

属性

为什么需要这样做？您可以阅读以下问题：

---

因此，从技术上讲，您还可以添加

内容：“\003c”你会得到一个字符（小于）
很好，你添加了jsfiddle的链接，但是也请把重要的代码放在帖子里（不仅仅是把fiddle链接变成代码：））没错，这更好，谢谢。我对设计结果不太满意。我怎样才能把三角形放得离桌子更远呢？好的，差不多了，谢谢。现在我想剩下的就是把箭头和直线垂直居中。。。jsfiddle.net/j95f8met/5知道怎么做吗？
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;
}

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: '';