html - Why can't I get rid of my caret in my dropdown button?

Question

I have a button that when clicked dropdown a menu. The button is a chat icon (fontawesome) and next to it I get a caret. I can't get rid of the caret. This is what I'm doing (I'm using Bootstrap 4):

.message-notification-chat-icon-mobile .dropdown-toggle::after {
  display: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-9ZfPnbegQSumzaE7mks2IYgHoayLtuto3AS6ieArECeaR8nCfliJVuLh/GaQ1gyM" crossorigin="anonymous">

<button class="btn dropdown-toggle ml-auto message-notification-chat-icon-mobile" type="button" id="dropdownTopMenuMessageNotification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="messageNotificationIcon">
        <i class="fas fa-comment"></i>
    </button>
    
    
  
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

question from:https://stackoverflow.com/questions/65907662/why-cant-i-get-rid-of-my-caret-in-my-dropdown-button

Answer 1

Just remove the class dropdown-toggle and it works. If for any reason you can't remove it, just do it with the css you wrote, changing

.message-notification-chat-icon-mobile .dropdown-toggle::after {

to

.message-notification-chat-icon-mobile.dropdown-toggle::after {

See both approaches in the following code:

.message-notification-chat-icon-mobile.dropdown-toggle::after {
  display: none;
}

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
  crossorigin="anonymous"
>

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
  crossorigin="anonymous"
></script>

<button
  class="btn ml-auto message-notification-chat-icon-mobile"
  type="button"
  id="dropdownTopMenuMessageNotification"
  data-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false"
  id="messageNotificationIcon"
>
  Dropdown 1 <i class="fas fa-comment"></i>
</button>

<button
  class="btn dropdown-toggle ml-auto message-notification-chat-icon-mobile"
  type="button"
  id="dropdownTopMenuMessageNotification"
  data-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false"
  id="messageNotificationIcon"
>
  Dropdown 2 <i class="fas fa-comment"></i>
</button>