Adding plus sign after "..." when using text-overflow - html

Question

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!

Answer 1

You can just set position absolute on your pseudo-element :
$(".overflow").click(function() {
$(this).toggleClass("overflow");
});
table,
td {
border: 1px solid black;
}
td {
width: 70px;
}
td .overflow {
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10px;
}
div {
position: relative;
}
div::after {
position: absolute;
content: " +";
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="overflow">A long textfield</div>
</td>
</tr>
<tr>
<td>
<div class="overflow">Another long textfield</div>
</td>
</tr>
<tr>
<td>
<div class="overflow">The third long textfield</div>
</td>
</tr>
</table>

Answer 2

I advise you to use cursor:pointer; to show the user that the cell is clickable.
To put "+" after that you can do that setting position:relative; to div and absolute to the ::after pseudo selector and managing with right and top.
UPDATE: Exactly like Mehdi wrote