How to put an arrow behind the text in a html list?

Question

I have a question about an html list. I have created a list with HTML and styled it with CSS. The list has children. See the screenshot I attached. My question is the following: I want to add an arrow after the text of the parent, when it has children. The arrow should point down. When the dropdown is opened, the arrow should point up.

This is about Wordpress. I have put the code in this jsfiddle: https://jsfiddle.net/ralphsmit/o4a3L86m/1/. Note that all styling is removed, therefore it looks quite ugly ;-), but the concept is the same.

The arrow should look like this: https://www.kisspng.com/png-chevron-corporation-computer-icons-arrow-symbol-ar-1215165/. If the menuitem is opened, the arrow should be pointing upwards. Furthermore, a menuitem has a standard opacity of .5, which increases to 1.0 when it is hovered. The arrow should do the same thing. When the page (Say ''News'') is the current opened page, the text turns red. I've done this with the .current_page_item class. It would be awesome if the arrow could do this too!

ul li.current_page_item > a {
  color: rgba(255, 0, 0, 1.0);
}

I would be very grateful if you could help me with this!

Answer 1

/* Define a fixed width for the entire menu */
.navigation {
  width: 80%;
  position: relative;
  top: 0px;
  left: 0px;
  margin-bottom: 28px;
  pointer-events: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}


nav ul:hover > li {
  opacity: 0.5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;
}

nav ul li:hover {
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;

}


nav>ul, .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and sub-menu) have padding and background color */
.mainmenu a {
  display: block;
  font-family: 'Playfair Display', sans-serif;;
  font-weight: normal;
  text-decoration: none;
  font-size: 37px;
  padding: 10px;
  color: rgba(255, 255, 255, 1.0);
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

/* add hover behaviour */
.mainmenu a:hover {
  opacity: 1.0 !important;
}


/* when hovering over a .mainmenu item,
  display the sub-menu inside it.
  we're changing the sub-menu's max-height from 0 to 600px;
*/

.mainmenu li:hover .sub-menu {
  display: block;
  max-height: 600px;
}

/*
  we now overwrite the background-color for .sub-menu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.sub-menu a {
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  margin-left: 24px;
  font-size: 22px;
}

/* hover behaviour for links inside .sub-menu */
.sub-menu a:hover {
  background-color: rgb(0, 0, 0);
  opacity: 1.0;
}

/* this is the initial state of all sub-menus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}


ul li.current_page_item > a {
  color: rgba(255, 0, 0, 1.0);
}

.navigation {
  width: 80%;
  position: relative;
  top: 0px;
  left: 0px;
  margin-bottom: 28px;
  pointer-events: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}


nav ul:hover > li {
  opacity: 0.5;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;
}

nav ul li:hover {
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .3s ease;
  transition: all .2s ease;

}


nav>ul, .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and sub-menu) have padding and background color */
.mainmenu a {
  display: block;
  font-family: 'Playfair Display', sans-serif;;
  font-weight: normal;
  text-decoration: none;
  font-size: 37px;
  padding: 10px;
  color: rgba(255, 255, 255, 1.0);
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

/* add hover behaviour */
.mainmenu a:hover {
  opacity: 1.0 !important;
}


/* when hovering over a .mainmenu item,
  display the sub-menu inside it.
  we're changing the sub-menu's max-height from 0 to 600px;
*/

.mainmenu li:hover .sub-menu {
  display: block;
  max-height: 600px;
}

.fa-chevron-up {
  display: none;
  opacity: 0;
}

.mainmenu li:hover .fa-chevron-up {
  display: inline-block;
  opacity: 1;
}

.fa-chevron-down {
  opacity: 1;
}

.mainmenu li:hover .fa-chevron-down {
  display: none;
}
/*
  we now overwrite the background-color for .sub-menu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.sub-menu a {
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  margin-left: 24px;
  font-size: 22px;
}

/* hover behaviour for links inside .sub-menu */
.sub-menu a:hover {
  background-color: rgb(0, 0, 0);
  opacity: 1.0;
}

/* this is the initial state of all sub-menus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}


ul li.current_page_item > a {
  color: rgba(255, 0, 0, 1.0);
}

* {
margin:0;
padding:0;
}

body {
  background-color: #000000;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
  <nav>
    <ul id="menu-header-menu" class="mainmenu"><li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/wordpress/page-one/">Work</a></li>
      <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost/wordpress/sample-page/">About</a></li>
      <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19">
        <a href="http://localhost/wordpress/about/">News <i class="fas fa-chevron-down"></i><i class="fas fa-chevron-up"></i>
        </a>
   
        <ul class="sub-menu">
          <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/wordpress/about/page-two-dropdown-two/">Page two – dropdown two</a></li>
          <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/wordpress/about/page-two-dropdown-one/">Page two – dropdown one</a></li>
        </ul>
      </li>
      <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#">Link 1</a></li>
      <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">2</a></li>
      <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">3</a></li>
      <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="#">4</a></li>
      <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-28"><a href="#">5</a>
        <ul class="sub-menu">
          <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-30"><a href="#">Drop 1</a>
            <ul class="sub-menu">
              <li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="#">Drop 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">6</a></li>
      <li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="#">7link</a></li>
    </ul>            
  </nav>
</body>
</html>

Use font-awesome icons to get the arrows. Go through this link https://www.w3schools.com/icons/fontawesome5_intro.asp or you can also visit their official site Hope it'll help

Answer 2

Here you go : https://jsfiddle.net/qunyma6c/ This is a CSS only solution What I did is find the has-children class, Then added a "CSS after selector" that's where the arrow icon will be, I used an arrow character but you can simply change that to an image or an icon as you like, Then added a hover for the after selector for the rotation and transition.

    .menu-item-has-children { position: relative; padding-left: 20px;  }
.menu-item-has-children::after {
    position: absolute;
    top: 20px;
     left: 5px;
    content: "▼";
    color: #fff!important;
}
.menu-item-has-children:hover::after { 
  -webkit-transition: -webkit-transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;  
-ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  }

Answer 3

you can use Pseudo-elements

.menu-item-has-children {
  position: relative;
  margin-left: 40px;
}

.menu-item-has-children:before {
    content: '';
    background: url(https://www.kforce.com/scripts/tablesaw/icons/png/icon-chevron-down.png);
    position: absolute;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    left: -30px;
    top: 12px;
}

.menu-item-has-children:hover:before {
  transform: rotate(180deg);
}

Working fiddle: https://jsfiddle.net/av70zbcq/