HTML / CSS - 在导航中的活动选项卡底部添加一个小三角形或箭头

Question

我需要帮助处理我正在处理的事情：标签显示不同的内容。它是简单的html / CSS，带有一些javascript来帮助选择标签。我创建了一个简单的标签系统，我可以循环浏览所有标签并显示不同的内容。而且我可以使用不同的颜色设置活动选项卡的样式，每当我点击另一个选项卡时，我都会使用Javascript来更改活动选项卡。现在我的问题是，我想在活动标签下方显示一个小箭头。这只是指向内容并显示活动选项卡。我尝试过使用:: before和:: after伪类的一些东西，但我不能让箭头粘在标题标题下面。例如，我希望在'ACADEMICS'下面或在'CHALO LIFE'标题或'SPOTLIGHT'标题下面有一个箭头。如果有人能够帮助我做到这一点，我将不胜感激。

HTML

<div class="indexContainer grayContainer">
    <div class="tabDiv">
       <nav class="tab">
            <ul class="tabMenu">
                <li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
                <li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
                <li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
            </ul>   
        </nav>

        <div id="Academics" class="tabContent default">
            <h3>Academics</h3>
            Talk about our academic programs
        </div>
        <div id="ChaloLife" class="tabContent">
            <h3>Chalo Life</h3>
            Talk about life at Chalo Trust School
        </div>
        <div id="Spotlight" class="tabContent">
            <h3>Spotlight</h3>
            Spotlight on special events or people
        </div>
    </div>
</div>

CSS

.indexContainer {
  width: 100%;
  margin: auto;
  min-height: 350px;
  height: auto;
        }
        .grayContainer {
            background-color: #ededed;
            color: black;
        }
        nav {  
            margin: 0px;

        }

        /*Sets the nav bar in a horizontal manner. Hides the items for the 
 list and ensures there's no scroll bar*/
        nav ul {
            display: flex; 
            flex-direction:row;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            overflow: hidden;

        }

        /*Styles each of the individual items in the nav bar list. Adds color 
  and changes their font. Adds a border at the end*/
        nav ul li {
            flex-grow: 1;
            font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida 
 Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation 
 Serif",Georgia,serif;
            font-size: 1em;
            font-weight: bolder;
            padding: 0;
        }

        /*Determines how the links inside the navbar will be displayed.Gives 
 them a background color*/
        nav ul li a {
            display: block;
            background: #800000;
            height: 30px;
            text-align:center;
            padding: 7px 10px;
            text-transform: uppercase;
            -webkit-transition:  0.45s;
            transition: 0.45s;

        }
        nav.tab {
            overflow: hidden;
            background: #e4e4e6;
            display: block;
            margin: auto;             
        }

        nav.tab a {
            background-color: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            display: block;
            margin: auto;
            height: 30px;
            vertical-align: middle;
            padding: 20px 16px;
            transition: 0.3s;
            border-right: #000 solid 1px;
            position: relative;
            color: #990000;

        }

        a.tablinks.lastChild{
            border: none;
        }
        a.tablinks:link {
            color: #990000;
            font-weight:bolder;
            font-size: 20px;
            text-transform: capitalize;
        }
        a.tablinks:visited {
            color: #990000;
            font-size: 20px;
            font-weight: 900;
        }

        a.tablinks:hover {
            color: black;
            background: white;

        }
        ul.tabMenu{
            border: none;
            display: flex;
            flex-direction: row;
        }

        a.tablinks.activeTab {
            background-color: #990000;
            color: white;

        }   
        .tabContent {
            display: none;
            padding: 6px 12px;
            border-top: none;
        }
        .default {
            display: block;
        }

JAVASCRIPT

function openTab(evt, tabName) {
    // Declare all variables
    var i, tabContent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabContent = document.getElementsByClassName("tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " activeTab";
    return true;
}