Question

我正在摆弄this menu触摸屏：

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

它似乎不是来自content属性，并且在任何地方都没有图像文件。当我在我自己的系统中复制它时，我也得到了IE和FF中的箭头。如果我们将nav代码更改为div并且我们删除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属性来使其发挥作用。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

您用于#nav span:after的CSS是三角形。

查看此网站https://css-tricks.com/examples/ShapesOfCSS/并向下滚动到“Triangle Down”。

Answer 3

下拉箭头似乎附加到li链接中span子元素的：after伪元素。

这是跨度在标记中的位置：

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

这是css规则：

#nav span::after

此规则的内容和边框颜色属性似乎是渲染和样式修改下拉箭头的内容。

向下箭头来自CSS下拉菜单中的哪个位置？

3 个答案: