Arrows in overflow-x-CodePudding

How can i show some arrow in my nav-items in mobile view with overflow-x? If the scroll bar is in the left side it should show some arrow pointing to the right side. Same as the right side view. I'm still currently learning with CSS.

Here is my current CSS code:

ul.nav.header {
display: flex;
flex-wrap: nowrap;
}

.nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
}

.text {
    white-space: nowrap;
}

.viewrifyimage {
    width: 100%;
    margin-top: 60px;
}

.servicebtn, .contactbtn, .careerbtn, .aboutbtn {
    font-family: cairo;
    text-transform: capitalize;
}

.nav-item {
    background-color: black !important;
    border-radius: 10px 10px 0px 0px;
}

.nav-item:hover,
.nav-item:focus {
    background-color: #39ac49 !important;
    color: white;
    border-radius: 10px 10px 0px 0px;
}

.boder {
    background-color: grey !important;
    color: black;
}

.active:focus {
    background-color: #39ac49 !important;
    color: white !important;
}

.nav-link  {
    color: white;
    border-radius: 10px 10px 0px 0px;
}

.nav-link:focus,
.nav-link:hover {
    color: white;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: white;
    background-color: #39ac49 !important;
    border-color: transparent !important;
    border-radius: 10px 10px 0px 0px !important;
}

Here's my html codes:

        <ul >
            <li >
                <a  aria-current="page" data-bs-toggle="tab" href="#about"><i ></i> About Us</a>
            </li>
            <li >
                <a  data-bs-toggle="tab" href="#secu"><img  src="{{ asset('img/a.png') }}"> security printing</a>
            </li>
            <li >
                <a  data-bs-toggle="tab" href="#it"><img  src="{{ asset('img/b.png') }}"> I.T Solutions</a>
            </li>
            <li >
                <a  data-bs-toggle="tab" href="#service"><i ></i> Viewrify®</a>
            </li>
            <li >
                <a  data-bs-toggle="tab" href="#contact"><i ></i> Contact Us</a>
            </li>
            <li >
                <a  data-bs-toggle="tab" href="#career"><i ></i></i> Careers</a>
            </li>
        </ul>

CodePudding user response：