Encountered an issue where the box fails to appear when hovering over the :after element.
HTML CODE:
<div class="top_line_dropdown">
<span class="logged_in_user">
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d190b5bcb8bf91b0b0b0ffb2b2">[email protected]</a> (Admin)
<div class="top_line_dropdown_content">
aaaa
</div>
</span>
</div>
CSS
.top_line_dropdown {
display: inline-block;
margin-left: 22px;
}
.top_line_dropdown .logged_in_user {
font-family: red;
font-size: 11px;
color: #999;
}
.top_line_dropdown .logged_in_user:after {
content: "\f078";
font-family: FontAwesome;
font-weight: none;
font-size: 9px;
color: #999;
padding-left: 5px;
}
.top_line_dropdown .logged_in_user .top_line_dropdown_content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
right: 50px;
}
.top_line_dropdown .logged_in_user:hover:after .top_line_dropdown_content {
display: block;
}
Upon changing from :hover to :hover:after, the expected box does not show up. The root cause of this issue remains elusive.
You can view a demonstration here: JSFIDDLE