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

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

Comments

Popular posts from this blog

Today Walkin 14th-Sept

Spring Elasticsearch Operations

Hibernate Search - Elasticsearch with JSON manipulation