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? thanks
>Solution :
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>