So I have a table with some text and I want to truncate the text after a certain length. I've achieved this using `text-overflow`.

```
.overflow {
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

```

When clicking the table cell I want the whole text to be shown (by changing the height of the row). Like this:

```
+------------------+       +------------------+
|     Header       |       |     Header       |
+------------------+       +------------------+
| First text block |  -->  | First text block |
+------------------+       +------------------+
| A long text b... |       | A long text      |
+------------------+       | block            |
      ^click               +------------------+

```

I've managed to do that as well.

But I also want to place a + sign after the "..." to show the user that the cell is clickable!

```
+--------------------+ 
|       Header       |   
+--------------------+  
| First text block   | 
+--------------------+  
| A long text b... + | 
+--------------------+ 

```

How can I do this? I tried using `:after` but that only added the + after the whole text.

What I've got so far: <http://jsfiddle.net/6qLcrswc/1/>

Thanks!