A set of HTML/CSS directions show accurately on Chrome/Edge:
However not on Firefox:
Every coloured letter on the picture belong to a protracted span (person chosen textual content) with a white background coloration. Moreover, every of these letters are surrounded by a “personnal” span which shows a alpha-colored ::after (to allow to have a number of textual content choices overlapping, not displayed on these photographs).
.annotWrp {
place: relative;
cursor: pointer;
text-indent: 0px;
opacity: 1;
}
.annotWrp>span::after {
content material: "";
place: absolute;
inset: 0px;
background-color: rgba(0, 128, 0, 0.25);
pointer-events: none;
}
The issue come up on areas (and area solely!), the place the coloured ::after does not match it is relative guardian span full width (which may be as much as two pixels larger), and I simply do not have a single clue on why. Do anybody have an thought why?
NB: allow me to kindly carry your consideration to the truth that this query is said to the desired downside, to not the explanation why that HTML/CSS code is completed that means.
