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

so have table text , want truncate text after length. i've achieved using text-overflow.

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

when clicking table cell want whole text shown (by changing height of row). this:

+------------------+       +------------------+ |     header       |       |     header       | +------------------+       +------------------+ | first text block |  -->  | first text block | +------------------+       +------------------+ | long text b... |       | long text      | +------------------+       | block            |       ^click               +------------------+ 

i've managed well.

but want place + sign after "..." show user cell clickable!

+--------------------+  |       header       |    +--------------------+   | first text block   |  +--------------------+   | long text b... + |  +--------------------+  

how can this? tried using :after added + after whole text.

what i've got far: http://jsfiddle.net/6qlcrswc/1/

thanks!

you can set position absolute on 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>