Keeping an :after element on ellipsis

Question

I want to have an icon (checkmark) behind a line with variable width. if the line becomes too long, i want it to be truncated with ellipsis. But the checkmark is supposed to stay AFTER the ellipsis

https://jsfiddle.net/Lkvt39re/

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

i've set the width to 80%, and want to have the :afterinserted ..well, after the ellipsis.

how can i do that?

Thanks

Answer 1

Try adding a ::before pseudo element instead, then style it to float right. This way, your pseudo content won't become trimmed out by the restrictions set to the element width.

CSS

.inner::before {
    content: 'X';
    float: right;
}

Alternatively

You can set the ::after pseudo element to the parent element .outer, then set the nested .inner element to display inline-block (allowing the pseudo element of .outer to fall after initial width of .inner) with a max-width declared; once this max-width is exceeded your overflow rule will apply, giving you the ellipsis but still keeping the pseudo element of .outer visible after the text-overflow.

The problem is trying to declare this pseudo element to an element that you've also declared width restrictions and overflow rules to. You'll need to declare the pseudo element outside of the element that will, at some point, begin trimming out content.

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inner::before {
    content: 'X';
    float: right;
}

.outer {
  width: 200px;
}

/* Alternative */

.alternative .inner {
    max-width: 80%;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.alternative .inner.no-max-width {
    max-width: none;
}

.alternative .inner::before {
    display: none;
}

.alternative.outer::after {
    content: 'X';
    display: inline-block;
}

<div class="outer">
  <div class="inner">
    this is pretty longggggg
  </div>
</div>
<br>
<p><strong>Alternative</strong></p>
<div class="alternative outer">
  <div class="inner">
    this is pretty longgggggggggggg
  </div>
</div>
  
<div class="alternative outer">  
  <div class="inner no-max-width">
    this is pretty long
  </div>
</div>

Answer 2

Devman, You need to give the pseudo element some shape and define it as either an inline-block or a block element to do so. You can then set the dimensions appropriate to your styling.

Check out this edit:

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  /** give your container some extra space for the pseudo **/ 
  padding-right: 25px;
}

.inner::after {
  content: 'X';
  color:red;
  /** define it as a "block" element and add dimension **/
  display: inline-block;
  height: 1.0rem;
  width: 1.0rem;

}

.outer {
  width: 180px;
}

http://codepen.io/jonrandahl/pen/rLMKwR