如何使用波浪号选择器定位CSS：after元素？

Question

::after选择器将在内容后插入一些内容，这可以与前面的选择器~一起定位吗？

例如，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;
}

代码示例

下面您可以找到我所追求的工作版本。但是，我通过包含“ sub-menu-bar” div来完成此操作。现在，似乎::after伪元素位于DOM检查器中的确切位置。如果可以在没有div的情况下完成，那就太好了。

之所以将子菜单栏显示在UL上，是因为我不希望在具有子菜单的两个项目之间切换时移动该菜单栏。

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

这不需要~。~Selector选择元素后的所有同级。伪元素::after在li内部。

[li:hover ~ li例如将目标悬停在li之后的所有li元素。

对于您想做的事情，使用：

ul li:hover:after {
    background: blue;
}

编辑：

[抱歉，我没有看到将ul用于ul。对于纯CSS，这是不可能的，因为没有“父”选择器。您只能使用ul:hover:after（或层次结构中比ul高的任何东西）来定位after元素。您可以做什么：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li></li>
</ul>

li:hover ~ li:last-of-type {
 //something
}

干杯！

Answer 2

当我将鼠标悬停在以类名为目标的特定列表项（li）上时。我喜欢更改::after元素的背景颜色，即位于ul::after上。

是，您可以使用pointer-events实现此效果。

方法是同时应用于<ul>和<li>样式：

ul, li {
  pointer-events: none;
}

并将样式应用于可悬停的<li>：

li.hover-over-this {
  pointer-events: auto;
}

工作示例：

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>

---

进一步阅读：

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events