css triangle after table row

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

Good you added the link to jsfiddle, but please also put the important bit of code in to the post (not just make the fiddle link into code :) ) — Rhumborl, Sep 22 '14 at 09:43

score 1 · Answer 1 · answered Sep 22 '14 at 09:44

1

'Content' must fix your problem ;)

content: '';

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

answered Sep 22 '14 at 09:44

Itsmeromka

3,621
9
46
79

That's right, it's much better, thanks. I'm not entirely pleased with the design result. How could I put the triangle further away from the table? – rityPY Sep 22 '14 at 09:51
1

Okay, almost there, thanks :). Now I think what's left is just to center vertically the arrow with the line... jsfiddle.net/j95f8met/5 Any idea how to do that ? – rityPY Sep 22 '14 at 10:04

score 0 · Answer 2 · edited May 23 '17 at 10:33

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.

css triangle after table row

2 Answers2