Pseudo element :after and overflow hidden

Question

I have this markup:

label.required:after {
  content: ' *';
  color: red;
}

<label class="required">please enter your username</label>

I want to use text-overflow: ellipsis to handle labels that are too long like so:

label {
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: ' *';
  color: red;
}

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

<label class="required ellipsis">please enter your username</label>

The problem is that the :after pseudo element is cut off also, therefore no * appears

I want the label to look like this instead (with the :after pseudo element showing):

please enter your us... *

Is it possible?

Answer 1

Yes, it is possible. By setting the label position: relative and the position of the pseudo-element to absolute.

label {
  position: relative;
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: '*';
  color: red;
  position: absolute;
  right: 0;
}

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

<label class="required ellipsis">please enter your username</label>