Why is my custom element's pseudo-element displayed after sibling elements?-CodePudding

When I use this html code:

box:after {
  color: #fff;
  font-size: 18px;
  padding: 1px 3px;
  background: blue;
  content: 'Text';
}

<div><a href="#">Some Text #1 <box /> Some Text #2 <box /></a></div>

The <box> element is shown after "Some Text #2" instead of shown after "Some Text #1".

But when I use <box></box> instead of <box /> its working good.

Is it possible to make it working but still using <box />. Thanks.

CodePudding user response：

It doesn't work that way, In HTML... There has to be an opening and closing tag

you cant do: <box/><box/><box/> just because you want 3 boxes,

You have to do: <box></box><box></box><box></box>

So the solution to your problem would be :

<div><a href="#">Some Text #1 <box></box>Some Text #2 <box></box></a></div>

I hope this helps