How to target CSS :after element with the tilde selector? - css

Question

The ::after selector will inserts something after the content, is this targetable with the preceding selector ~?
For example, HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
::after
</ul>
CSS:
ul::after {
content: '';
display: block;
height: 50px;
width: 100%;
background: red;
}
ul li:hover ~ ::after {
background: blue;
}
CODE EXAMPLE
Below you are able to find a working version of what I am after. However I did this with the "sub-menu-bar" div included. Now it seems the ::after pseudo element is positioned at the exact location in the DOM inspector. It would be nice if it could be done without the div.
The reason why the submenu bar is on the UL is because I don't want the bar to move when switching between two items which have a submenu.
ul, li
{
list-style: none;
padding: 0;
margin: 0;
}
a
{
cursor: pointer;
display: block;
color: inherit;
text-decoration: none;
text-transform: uppercase;
}
a > *
{
user-select: none;
}
ul.menu
{
position: relative;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
background: #FFF;
}
ul.menu > li.menu-item > a
{
padding: 0px 10px;
height: 50px;
overflow: hidden;
transition: height 0.3s;
}
ul.menu > li.menu-item > ul.sub-menu
{
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
display: flex;
width: 100%;
height: 0px;
align-items: center;
justify-content: center;
transition: height 0.4s;
color: #FFF;
}
ul.menu > li.menu-item > ul.sub-menu > li.menu-item
{
overflow: hidden;
}
ul.menu > li.menu-item > ul.sub-menu > li.menu-item > a
{
padding: 0px 10px;
transform: translateY(100%);
opacity: 1;
transition-property: transform, opacity;
transition-timing-function: cubic-bezier(0.52, 0.16, 0.24, 1);
transition-delay: 0s;
transition-duration: 0.2s;
}
ul.menu > div.sub-menu-bar
{
content: '';
display: block;
width: 100%;
height: 2px;
flex-basis: 100%;
transition: height 0.4s;
background: #000;
}
ul.menu > li.menu-item-has-children:hover > ul.sub-menu
{
height: 50px;
}
ul.menu > li.menu-item-has-children:hover > ul.sub-menu > li.menu-item > a
{
transform: translateY(0%);
opacity: 1;
transition-delay: 0.2s;
}
ul.menu > li.menu-item-has-children:hover ~ div.sub-menu-bar
{
height: 50px;
}
<ul class="menu">
<li class="menu-item"><a>Item #1</a></li>
<li class="menu-item menu-item-has-children">
<a>Item #2</a>
<ul class="sub-menu">
<li class="menu-item"><a>Subitem #2.1</a></li>
<li class="menu-item"><a>Subitem #2.2</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a>Item #3</a>
<ul class="sub-menu">
<li class="menu-item"><a>Subitem #3.1</a></li>
<li class="menu-item"><a>Subitem #3.2</a></li>
</ul>
</li>
<li class="menu-item"><a>Item #4</a></li>
<li class="menu-item"><a>Item #5</a></li>
<div class="sub-menu-bar"></div> <!-- Can we avoid this with ::after pseudo element? -->
</ul>
<p>Content below the navigation.</p>

Answer 1

When I hover on a specific list item (li) targeted with a class name.
I like the background color of the ::after element to change, which is
located on ul::after.
Yes, you can achieve this effect using pointer-events.
The way to do it is to apply to both the <ul> and the <li> the style:
ul, li {
pointer-events: none;
}
and apply to the hoverable <li> the style:
li.hover-over-this {
pointer-events: auto;
}
Working Example:
ul {
position: relative;
margin-left: 0;
padding-left: 0;
font-weight: bold;
background-color: white;
cursor: pointer;
}
li {
width: 50%;
padding: 6px;
color: rgb(255, 255, 255);
line-height: 24px;
background-color: red;
list-style: none;
}
ul:hover::after {
content: 'Hovering!';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
line-height: 100px;
color: rgb(255, 0, 0);
text-align: center;
background-color: rgb(255, 255, 0);
}
ul, li {
pointer-events: none;
}
li.hover-over-this {
pointer-events: auto;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="hover-over-this">Hover Over This</li>
<li>5</li>
</ul>
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 2

This does not require a ~. the ~ selector selects all siblings after the element. The pseudo element ::after is inside the li.
li:hover ~ li would for example target all li elements after the li that is hovered.
For what you want to do, use:
ul li:hover:after {
background: blue;
}
Edit:
Sorry, I didn't see the after applied to ul. This is not possible with pure CSS as there is no "parent" selector. You can only use ul:hover:after (or anything higher in hierarchy than ul) to target the after element.
What you could do:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li></li>
</ul>
li:hover ~ li:last-of-type {
//something
}