CSS 下拉菜单中的向下箭头来自哪里？

Question

我正在摆弄触摸屏的这个菜单：

不知何故#nav span:after导致跨度上出现向下箭头 - 如何？它从何而来？如何更改此图标/字符？

它似乎不是来自content酒店，而且任何地方都没有图像文件。当我在自己的系统中复制这个时，我也在 IE 和 FF 中得到了箭头。如果我们将nav标签更改为 adiv并且删除aria-haspopup. 如果我在 IE 或 FF 中按 F12，我找不到它来查看它的引入位置，除非它是使用边框或其他东西的一些奇怪的怪癖。

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

看起来他们正在使用 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>