How to add an arrow

How to add arrow using css to navbar mark (see example image)

The arrow should not appear when viewed in mobile mode.

The following doesn't work - clearly I'm not the best at css.

 .navbar-default {
        .navbar-brand {
                position: relative; 
                float: left;
                margin-right:30px;
                color: @navbar-default-brand-color;
                &:hover,
                &:focus {
                    color: @navbar-default-brand-hover-color;
                    background-color: @navbar-default-brand-hover-bg;
                }

                &:after {
                      content: " ";
                      display: block;
                      width: 0;
                      height: 0;
                      border-top: 19px solid transparent;
                      border-bottom: 19px solid transparent;
                      border-left: 12px solid @brand-secondary;
                      position: absolute;
                      top: 50%;
                      margin-top: -19px;
                      left: 100%;
                      z-index: 3;
                }


                &:before {
                      content: " ";
                      display: block;
                      width: 0;
                      height: 0;
                      border-top: 19px solid transparent;
                      border-bottom: 19px solid transparent;
                      border-left: 12px solid white;
                      position: absolute;
                      top: 50%;
                      margin-top: -19px;
                      margin-left: 1px;
                      left: 100%;
                      z-index: 3;
                }


               @media (max-width: @grid-float-breakpoint) {


               }
        }
    }

      

        
        
        
      

    

html looks like this

 <nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" type="button">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Bootstrap</a>
     </div>
     <div id="navbar" class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
            <li class="active">
               <a href="#">Getting started</a>
            </li>
            <li>
               <a href="#">CSS</a>
            </li>
            <li>
               <a href="#">Components</a>
            </li>
            <li>
               <a href="#">Javascript</a>
            </li>
             <li>
               <a href="#">Customize</a>
            </li>
     </div>
  </div>
</nav>

      

        
        
        
      

    

Update: I managed to get it working using before and after css. How do I override this css with a media query, and what is the css that goes into the media query to remove it on mobile?