I am trying to align the ::after pseudo element on the same line of the div. But why the ::after element is little down from the start position of div?
*,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bar{
height: 8px;
width: 60px;
background-color: red;
position: relative;
border: 1px solid blueviolet;
}
.bar::after{
content: '';
box-sizing: border-box;
position: absolute;
top: 0;
left: calc(100% + 1px);
width: 8px;
height: 8px;
border: 1px solid blueviolet;
background-color: rgba(50, 67, 255);
}<div class="bar"></div>