include a pseudoelement inside a anchor hover state - html

Question

I have pseudoelements next to my links in a navigation menu. There are small downward arrows indicating a dropdown and On hover, the background changes. However, the only area that is covered is the active link and not the downward pointing arrow.
A sample of that is below:
.item > a {
color: #000;
padding-top: 1.5rem;
padding-bottom: 1.1rem;
}
.item > a:hover {
background-color: blue;
color: #fff;
}
.arrow-nav-item:after {
content: '';
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #5a5a5a;
clear: both;
position: absolute;
top: 25px;
right: 625px;
}
<ul id="items">
<li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
<ul class="subitem">
<li>Chapter 1</li>
</ul>
</li>
</ul>
Basically I have an ::after on my anchor tag which is positioned absolutely and is styled to look like a down arrow. On hover, a background appears, and I want the arrow included inside the colored hover area.
The reason it's not included I think is because of the absolute positioning - because when the arrow is relative, I can include it in the hover area. I don't think I can do that because giving the :after a relative positioning loses control of placement.
A couple of things I tried: add more right padding to the anchor, setting a fixed width on anchor and changing placement of pseudo-element (moving it to <li> tag) etc.
Should this be refactored to change? Is absolute positioning not the best way to handle these pseudoelements?

Answer 1

Using right in that way will cause problems as the screen resizes. Instead, you can remove absolute positioning and position the anchor with margin instead...
.item>a {
color: #000;
padding-top: 1.5rem;
padding-bottom: 1.1rem;
}
.item>a:hover {
background-color: blue;
color: #fff;
}
.arrow-nav-item:after {
content: '';
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #5a5a5a;
margin-left: 1em;
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
.arrow-nav-item:hover:after {
border-top-color: #FFF;
}
<ul id="items">
<li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
<ul class="subitem">
<li>Chapter 1</li>
</ul>
</li>
</ul>

Answer 2

While absolute-positioning would be a good way to handle this, you certainly don't want to be using giant offsets relative to the right. What I would recommend is to make use of ::before, and simply set a small negative margin-left on the dropdown:
.item>a {
color: #000;
padding-top: 1.5rem;
padding-bottom: 1.1rem;
}
.item>a:hover {
background-color: blue;
color: #fff;
}
.arrow-nav-item:before {
content: '';
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #5a5a5a;
position: absolute;
margin-left: -35px;
margin-top: 5px;
}
<ul id="items">
<li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
<ul class="subitem">
<li>Chapter 1</li>
</ul>
</li>
</ul>
Note that this makes the dropdown relative to the element's left-hand side, so it will always appear in the same place, regardless of the content of the <li>. However, it still has the dropdown arrow outside of the`. The problem is that in order to have the background cover both components, you need to move the arrow inside the bullet points.
This can then be offset with padding-left on the <a> tag itself, so that the dropdown remains within the blue background:
.item>a {
color: #000;
padding-top: 1.5rem;
padding-bottom: 1.1rem;
}
.item>a:hover {
background-color: blue;
color: #fff;
}
.arrow-nav-item:before {
content: '';
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #5a5a5a;
position: absolute;
margin-left: -15px;
margin-top: 5px;
}
.arrow-nav-item {
padding-left: 20px; /* Larger than margin-left */
}
<ul id="items">
<li class="item"><a class="arrow-nav-item" href="#">Main Item</a>
<ul class="subitem">
<li>Chapter 1</li>
</ul>
</li>
</ul>
I don't think it's possible to have the dropdown arrow outside the bullet point and still retain the background, but hopefully this will suffice :)