Last night I was recreating a project from a course when I came across a strange interaction. I was creating arrows using the border property that can by used for creating a timeline.
This pen shows the strange interaction. I created two sets of divs where the only difference in the css is that the first set has “position: absolute”. Note that I am not changing the X or Y position on either set of divs other to move the text to the right for accessibility.
For the div set that doesn’t have absolute positioning, the size of border is altered and the point of the arrow is hidden or removed. Why is this happening? If you have any other questions, please let me know. Thanks!
I appreciate your feedback but in this case I think that you are incorrect. Display: static does exist but we rarely have to assign it because it’s the default for all HTML elements as seen here. Based off your feedback that pseudoelements are display: inline by default, I wanted to try to set it as display: static to see if it would correct the issue.
Edit: If I misunderstood what you were saying, please elaborate if you could.
That is always a possibility but I don’t think that is the case here.
From my experience with this the issue happens when there is no position set and the display is set to inline (defaulted by pseudoelements per you).
The issue is resolved when I set the position to absolute OR I set the display to flex, grid or block.
In an attempt to determine if the issue was only caused by display inline, I set display static which did not resolve the issue. Does that make sense? I acknowledge that I’m still a beginner.
Pseudo element being inline will take some height (height of the font? ), but being empty won’t take any width.
If psuedoelements are inline by default, would’t that mean that they wouldn’t be affected by height or width?
Thank you for being patient and helping me, I was being a bit thick. I was associating static as a display property and not a positional property. I had the same issue with assigning absolute to display before I realized my mistake. The good news is that as embarrassing as this is, it should keep me from making the mistake again.