Question 227941 in Html Question posted in
Some basic documentation can be found here.

Html – Pseudo element :after and overflow hidden

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    I’ve added the position: absolute;, top: 0;, and right: -10px; properties to ensure that the asterisk at the end of the label appears correctly. The right value might need further adjustment depending on your design preferences.

    This CSS code will create a pseudo element after the label element. The content of the pseudo element will be an asterisk (*), and it will be positioned to the right and top of the label element.

    label.required {
  position: relative;
  display: inline-block;
  max-width: 150px; /* Adjust as needed */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

label.required::after {
  content: "*";
  color: red;
  position: absolute;
  top: 0;
  right: -1px; /* Adjust as needed */
}
    <label class="required ellipsis">please enter your username</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search