Где находится нисходящая стрелка в раскрывающемся меню CSS?

Question

Я возился с this menu для сенсорных экранов:

Как-то #nav span:after вызывает стрелка вниз, чтобы появиться на пролетах - как? От куда это? Как я могу изменить этот значок/символ?

Это не похоже на свойство content и нет файла изображения в любом месте. Когда я повторяю это в своей собственной системе, я также получаю стрелку в IE и FF. Появляется, если мы изменим тег nav на div, и если мы удалим aria-haspopup. Если я F12 в IE или FF, я не могу найти его, чтобы увидеть, где он вводится, если только это не какая-то странная причуда с использованием границ или чего-то еще.

HTML:

<nav id="nav" role="navigation"> 
    <span href="#nav" title="Show navigation">Show navigation</span> 
    <span href="#" title="Hide navigation">Hide navigation</span> 

    <ul class="clearfix"> 
     <li><a href="">Home</a> 

     </li> 
     <li> <a href="" aria-haspopup="true"><span>Blog</span></a> 

      <ul> 
       <li><a href="">Design</a> 

       </li> 
       <li><a href="">HTML</a> 

       </li> 
       <li><a href="">CSS</a> 

       </li> 
       <li><a href="">JavaScript</a> 

       </li> 
      </ul> 
     </li> 
     <li> <a href="" aria-haspopup="true"><span>Work</span></a> 

      <ul> 
       <li><a href="">Web Design</a> 

       </li> 
       <li><a href="">Typography</a> 

       </li> 
       <li><a href="">Front-End</a> 

       </li> 
      </ul> 
     </li> 
     <li><a href="">About</a> 

     </li> 
    </ul> 
</nav> 

CSS:

#nav { 
    width: 60em; 
    /* 1000 */ 
    font-family:'Open Sans', sans-serif; 
    font-weight: 400; 
    position: absolute; 
    top: 25%; 
    left: 50%; 
    margin-left: -30em; 
    /* 30 480 */ 
} 
#nav > span { 
    display: none; 
} 
#nav li { 
    position: relative; 
} 
#nav li a { 
    color: #fff; 
    display: block; 
} 
#nav li a:active { 
    background-color: #c00 !important; 
} 
#nav span:after { 
    width: 0; 
    height: 0; 
    border: 0.313em solid transparent; 
    /* 5 */ 
    border-bottom: none; 
    border-top-color: #efa585; 
    content:''; 
    vertical-align: middle; 
    display: inline-block; 
    position: relative; 
    right: -0.313em; 
    /* 5 */ 
} 
/* first level */ 
#nav > ul { 
    height: 3.75em; 
    /* 60 */ 
    background-color: #e15a1f; 
} 
#nav > ul > li { 
    width: 25%; 
    height: 100%; 
    float: left; 
} 
#nav > ul > li > a { 
    height: 100%; 
    font-size: 1.5em; 
    /* 24 */ 
    line-height: 2.5em; 
    /* 60 (24) */ 
    text-align: center; 
} 
#nav > ul > li:not(:last-child) > a { 
    border-right: 1px solid #cc470d; 
} 
#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a { 
    background-color: #cc470d; 
} 
/* second level */ 
#nav li ul { 
    background-color: #cc470d; 
    display: none; 
    position: absolute; 
    top: 100%; 
} 
#nav li:hover ul { 
    display: block; 
    left: 0; 
    right: 0; 
} 
#nav li:not(:first-child):hover ul { 
    left: -1px; 
} 
#nav li ul a { 
    font-size: 1.25em; 
    /* 20 */ 
    border-top: 1px solid #e15a1f; 
    padding: 0.75em; 
    /* 15 (20) */ 
} 
#nav li ul li a:hover, #nav li ul:not(:hover) li.active a { 
    background-color: #e15a1f; 
} 
@media only screen and (max-width: 62.5em) 
/* 1000 */ 
{ 
    #nav { 
     width: 100%; 
     position: static; 
     margin: 0; 
    } 
} 
@media only screen and (max-width: 40em) 
/* 640 */ 
{ 
    html { 
     font-size: 75%; 
     /* 12 */ 
    } 
    #nav { 
     position: relative; 
     top: auto; 
     left: auto; 
    } 
    #nav > span { 
     width: 3.125em; 
     /* 50 */ 
     height: 3.125em; 
     /* 50 */ 
     text-align: left; 
     text-indent: -9999px; 
     background-color: #e15a1f; 
     position: relative; 
    } 
    #nav > span:before, #nav > span:after { 
     position: absolute; 
     border: 2px solid #fff; 
     top: 35%; 
     left: 25%; 
     right: 25%; 
     content:''; 
    } 
    #nav > span:after { 
     top: 60%; 
    } 
    #nav:not(:target) > span:first-of-type, #nav:target > span:last-of-type { 
     display: block; 
    } 
    /* first level */ 
    #nav > ul { 
     height: auto; 
     display: none; 
     position: absolute; 
     left: 0; 
     right: 0; 
    } 
    #nav:target > ul { 
     display: block; 
    } 
    #nav > ul > li { 
     width: 100%; 
     float: none; 
    } 
    #nav > ul > li > span { 
     height: auto; 
     text-align: left; 
     padding: 0 0.833em; 
     /* 20 (24) */ 
    } 
    #nav > ul > li:not(:last-child) > span { 
     border-right: none; 
     border-bottom: 1px solid #cc470d; 
    } 
    /* second level */ 
    #nav li ul { 
     position: static; 
     padding: 1.25em; 
     /* 20 */ 
     padding-top: 0; 
    } 
} 

Answer 1

CSS-вы используете для #nav span:after является треугольник.

Проверьте этот сайт https://css-tricks.com/examples/ShapesOfCSS/ и прокрутите вниз до пункта «Треугольник вниз».

Answer 2

Похоже, они используют CSS3, чтобы нарисовать стрелку в span:after.

Они используют свойство border, чтобы заставить его работать.

#nav span:after { 
 
    width: 0; 
 
    height: 0; 
 
    border: 0.313em solid transparent; 
 
    border-bottom: none; 
 
    border-top-color: #efa585; 
 
    content: ''; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    position: relative; 
 
    right: -0.313em; 
 
}

<div id="nav"><span>Test Arrow</span></div>

Answer 3

Стрелка вниз, по-видимому, прикреплена к: после псевдоэлемента дочернего элемента span в пределах ссылки li.

Это где пролет в разметке:

<ul class="clearfix"> 
    <li class="active"> 
     <a href="?blog"><span>Blog</span></a> 

Это правило CSS:

#nav span::after 

Содержание и границы свойства цвета для этого правила, как представляется, что делает и стилистически изменяя стрелки вниз.