pseudo element created with :after is not following the right element-CodePudding

I have the following structure, when the label is required, there’s a star next to the label. The problem that I’m having is that if the label has an icon and tooltip inside, it get’s between the label and the star. What could be the possible solution to always have the start right after the label?

.required:after {
  content: '*';
}

<label for="input-required" >
  Label
  <span >
    <i ></i>
    <span >Message</span>
  </span>
</label>

CodePudding user response：

As described by Rene in his comment, you'll have to put the target text in a span and style that. See example below.

.required > span:first-child:after {
  content: '*';
}

<label for="input-required" >
  <span>Label</span>
  <span >
    <i ></i>
    <span >Message</span>
  </span>
</label>

CodePudding user response：

Put the * on a before pseudo element on the direct-child span. It will then come before the contents of that span.

.required>span::before {
  content: '*';
}

<label for="input-required" >
  Label
  <span >
    <i ></i>
    <span >Message</span>
  </span>
</label>

CodePudding user response：

Here's a simple solution, wrap your <label> text in a <span> and attach the star to that span:

.required > .text::after {
  content: ' *';
}

<label for="input-required" >
  <span >Label</span>
  <span >
    <i >Icon</i>
    <span >Message</span>
  </span>
</label>

CodePudding user response：

You could add another span to exclusively contain the star, eg:

<label for="input-required" >
  Label
  <span >*</span>
  <span >
    <i ></i>
      <span >Message</span>
    </span>
</label>

and alter the new span's display style based on if the label has a required class

.star {
  display: none;
}

.required > .star {
  display:inline;
}