I am facing an issue with positioning a down arrow using the ::after
element. While it works perfectly in most browsers, Firefox seems to be causing trouble.
Here is how it appears in Firefox: https://i.sstatic.net/tvpbr.jpg
And here is how it looks in Chrome, Opera, and Edge: https://i.sstatic.net/SI5K1.jpg
.heading-wrapper {
width: auto;
display: inline-block;
padding-left: 6rem;
}
.menu__dropdown-wrapper {
position: relative;
cursor: pointer;
}
.dropdown {
position: relative;
padding: 1rem;
}
.dropdown::after {
content: "▼";
font-size: 2rem;
position: absolute;
right: -1rem;
bottom: -0.3rem;
}
<div class="heading-wrapper menu__dropdown-wrapper">
<h1 class="dropdown">
<span class="first-letter heading-medium">Studio</span>
<span class="first-letter heading-medium"></span>
</h1>
<div class="menu__dropdown-content">
// menu items here
</div>
</div>
The issue seems to be related to ignoring the padding. Has anyone encountered this problem before or have suggestions on what I can do instead? I've tried adjusting various properties like padding
, margin
, top
, bottom
, and right
distances, but the mispositioning of the arrow in Firefox persists.
EDIT:
I noticed that when resizing the viewport in Firefox due to Media Queries
triggering changes in font-size
and paddings
, the paddings are suddenly recognized. However, upon page reload, the paddings disappear again.
EDIT 2:
This issue isn't isolated to my browser alone, as it also occurs on Firefox mobile and other devices running Firefox. When inspecting elements with dev tools open, the paddings or margins seem to show up, yet the arrow (or words) may stick together incorrectly in Firefox rendering them as one word.
EDIT 3:
A workaround that seems to work for making Firefox acknowledge the padding is adding:
.dropdown {
display: inline-flex; <-- now paddings get recognized
position: relative;
padding: 1rem;
}
Although this solution affects the formatting of the first letter, it's preferable to having words clustered together or the arrow misplaced entirely. If anyone has insights or ideas on resolving this strange behavior, please share! It's still puzzling to me.