devman devman - 5 months ago 38
CSS Question

Keeping an :after element on ellipsis

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
:after
inserted ..well, after the ellipsis.

how can i do that?

Thanks

Answer

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>

Comments