HTML and CSS caret dropdown menu

问题

how can one add a dropdown caret to the account link in the html code below . . .

<nav>
    <ul id="menu">
        <li class="home"><a href= "home.html" class="menu" ><h3>Home</h3></a></li>
        
        <li class="news"><a href= "news.html" class="menu" target="_blank"><h3>News</h3></a></li>
        
        <li class="account"><a href= "#"  class="menu dropdown-toggle" target="_blank" data-toggle="dropdown"><h3>Account</h3></a></li> 
   </ul>  
    </nav>  

回答1:

There are many ways to do this. Here is a way using only CSS and the ::after psuedo element.

.dropdown-toggle {
  display: flex;
  align-items: center;
}

.dropdown-toggle::after {
  content: "⬇️";
  margin-left: 10px;
}

<nav>
  <ul id="menu">
    <li class="home"><a href="home.html" class="menu">
        <h3>Home</h3>
      </a></li>

    <li class="news"><a href="news.html" class="menu" target="_blank">
        <h3>News</h3>
      </a></li>

    <li class="account"><a href="#" class="menu dropdown-toggle" target="_blank" data-toggle="dropdown">
        <h3>Account</h3>
      </a></li>
  </ul>
</nav>

来源：https://stackoverflow.com/questions/62844114/html-and-css-caret-dropdown-menu