html - 疑似要素 :after :before を条件付きで使用するにはどうすればよいですか

Question

リンクの後に別の要素が続く場合にのみ、リンクの後に疑似要素を挿入したい場合は、ul. どうすればこれを行うことができますか?

例：

<ul>
    <li>
        <a href="#">blah<!-- insert -> here with CSS --></a>
        <ul>
            <li>More stuff</li>
        </ul>
    </li>
    <li>
        <a href="#">blah 2<!--Do nothing here--></a>
    </li>
</ul>

私が望むCSS：

ul li a:after if(next:ul) {
   content:"->";
}

JavaScript/jQuery を使用しようとしていません。そして、条件がcssの離れていない場合は実現します。これを行う方法はありますか？

Answer 1

一般に、次の兄弟に基づいて要素を選択することはできません。

特定のケースではul li a:not(:last-child)::after、要素が続かないアンカーが<ul>最後の子要素でもあるため、 を使用できます。

Answer 2

以下を簡単に使用できます。

ul + li a:after {  /* ...css code... */  }

基本的に、これは次のことを意味します。

要素の直前にaある要素に含まれる要素に一致します。liul

---

+CSSの演算子は、隣接兄弟コンビネーターと呼ばれます。