Text ellipse overlap using CSS only

.css

.description {
  /* hide text if it more than N lines  */
  @include font-size(2);
  margin-top: units(0.5);
  padding: 0 units(0.5);
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  max-height: units(5);
  /* fix problem when last visible word doesn't adjoin right side  */
}
/* create the ... */
.description:before {
  /* points in the end */
  content: '...';
  color: #fffff00;
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.description:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}