Where does the down arrow come from in this CSS drop

This question already has an answer here:

How do CSS triangles work? 18 answers

---

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".

---

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>

---

The drop down 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 drop down arrows.

链接地址: http://www.djcxy.com/p/89486.html

上一篇: 使用CSS绘制三角形

下一篇: 在这个CSS下拉菜单中，下箭头来自哪里