Nur selektieren, wo das nächste Element = ... ist

[ebody]

Hallo,

https://codepen.io/ebody/pen/gOOQXjN

Ich möchte in einem Menü jedem Menüpunkt der ein Dropdown Menü enthält, ein Zeichen rechts neben dem Linktext mit CSS setzen. Wenn ich diesen Menüpunkten eine Klasse geben würde, wäre es kein Problem, ich würde aber gerne versuchen darauf zu verzichten.

Ist es möglich, dass ich nur die <li> mit CSS selektiere, die ein <a><ul> beinhalten, um dann mit ::after oder ::before ein Zeichen zu platzieren?

<ul id="menu">
  <li>
    <a href="#">Äpfel</a>
    <ul class="subMenu">
      <li><a href="#">Rote</a></li>
      <li><a href="#">Grüne</a></li>
      <li><a href="#">Gelbe</li>
    </ul>
  </li>
  <li><a href="#">Birnen</a></li>
  <li><a href="#">Bananen</a></li>
</ul>

li{
  list-style: none;
}

#menu > li > a::after ul.subMenu{
  content: " +";
}

/*
#menu > li > a::after + ul.subMenu{
  content: " +";
}

ul.subMenu::before{
  content: " +";
}
*/

Gruß ebody