Where does the down arrow come from in this CSS drop-down menu?

Question

I am fiddling with the this menu for touch screens:

Somehow #nav span:after is causing a down arrow to appear on the spans - how? Where does it come from? How can I change this icon/character?

It does not seem to be from the content property and there is no image file anywhere. When I replicate this in my own system I also get the arrow, in IE and FF. It appears if we change the nav tag to a div and if we remove aria-haspopup. If I F12 in IE or FF I can't find it to see where it is being introduced, unless it is some weird quirk using the borders or something.

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

It might be dynamically placed with JS or it can just be the part of the background — sinanspd, Mar 23 '15 at 15:34
It is a CSS triangle. It is `span:after`. There is no image as it is created using only CSS, [**check it out**](http://codepen.io/chriscoyier/pen/lotjh) and you will understand. — Ruddy, Mar 23 '15 at 15:34
Can you please accept Adjit's answer please, your question is starting to get spammed with the same answer even tho they are no better then the first. — Ruddy, Mar 23 '15 at 15:42
Thanks for the answers. As I suspected it uses some cryptic CSS on the borders (further explained here: http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work). I will rather replace these cryptic borders with an explicit "content" character like "▼" so somebody else looking at my code will not be similarly confused. — Etherman, Mar 23 '15 at 15:58

score 5 · Answer 1 · answered Mar 23 '15 at 15:36

It looks like they are using CSS3 to draw an arrow in span:after.

They use the border property to get it to work.

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

score 3 · Accepted Answer · answered Mar 23 '15 at 15:38

3

The CSS you are using for #nav span:after is the triangle.

Check out this site https://css-tricks.com/examples/ShapesOfCSS/ and scroll down to "Triangle Down".

answered Mar 23 '15 at 15:38

xengravity

3,501
18
27

score 0 · Answer 3 · edited Feb 13 '20 at 03:08

The dropdown arrow appears to be attached to the :after pseudo-element of the span child element within the a link of the li.

This is where the span is in the markup:

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

This is the css rule:

#nav span::after

The content and border-color properties for this rule appear to be what is rendering and stylistically modifying the dropdown arrows.

Where does the down arrow come from in this CSS drop-down menu?

3 Answers3