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

Html – Pseudo element :after and ellipsis

From a previous question … Pseudo element :after and overflow hidden … I’ve been given the following code, which displays a * after a required form label, even if the form label has an ellipsis

It works perfectly when an ellipsis is displayed
BUT when no ellipsis is required, the positioning of the * is slightly off

Any fix for this? thx

label {
  position: relative;
  display: inline-block;
  max-width: 240px;
}
 
label.required:after {
  content: '*';
  color: red;
  position: absolute;
  right: 0;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div>
  <label class="required ellipsis">long text works really really very really well</label>
</div>
<div>
  <label class="required ellipsis">short text * positioning is off</label>
</div>
Tags:

2

Answers


  1. 0

    If you’re fine with moving the * slightly to the right in both cases, you could add a span around your text and add the ellipsis class to it. This will allow you to move the * to the right without it being affected by overflow: hidden;

    Like so:

    label {
  position: relative;
  display: inline-block;
  max-width: 240px;
}
 
label.required:after {
  content: '*';
  color: red;
  position: absolute;
  top: 0;
  right: -12px;
}

.ellipsis {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
    <div>
  <label class="required"><span class="ellipsis">long text works really really very really well</span></label>
</div>
<div>
  <label class="required"><span class="ellipsis">short text * positioning is off</span></label>
</div>
    Login or Signup to reply.
  2. 0

    No need to use position: absolute;.
    Wrap the text in a <span> and use display: flex;:

    label {
  display: flex;
  column-gap: .3em;
  max-width: 240px;
}
 
.required:after {
  content: '*';
  flex: none;
  color: red;
}

.required span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
    <label class="required">
  <span>long text works really really very really well</span>
</label>
<label class="required">
  <span>short text * positioning is off</span>
</label>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search