HTML 和 CSS 插入符號下拉菜單

Question

如何在下面的 html 代碼中的帳戶鏈接中添加下拉插入符號。 . .

<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>  

Answer 1

有很多方法可以做到這一點。 這是一種僅使用 CSS 和::after偽元素的方法。

 .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>