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

2021-12-21

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.

from Recent Questions - Stack Overflow https://ift.tt/3mm1rts
https://ift.tt/eA8V8J

Theprogrammersfirst