I am encountering an issue specifically with the Chrome Browser. In my HTML code, I have several span tags, some of which have the position: relative CSS property as they contain a div with position: absolute. The goal is for the div to be positioned at the bottom-left of the span element.
Everything works correctly, except when the span starts on a new line, there is a positioning problem with the div.arrow (refer to the images and code provided). (Alternatively, see it in action on JSFiddle)
.selected {
position: relative;
border-bottom: 2px solid red;
padding-bottom: 2px;
}
.arrow {
position:absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 4px solid transparent;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: red;
}<span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> <span>foobar</span> ... To replicate the issue, try resizing your window to match the image provided: https://i.sstatic.net/Occke.png
The expected outcome should resemble this: https://i.sstatic.net/Bf8CU.png
If you have any solutions or suggestions to resolve this issue, please share. Thank you!