html - 附加 :after on text element with full width is relative to the text and not the element itself 的内容

Question

我正在尝试从头开始创建下拉菜单

我想在容器的末端添加一个箭头，但它总是被限制在文本旁边。如果 span 是一个宽度为 100% 的 block 元素，并且使用 :after 作为箭头，为什么它紧挨着文本而不是靠近元素的末尾？

    <div id="wrap" style="border: solid 1px green; width: 100%;">
         <span style="border: solid 1px blue; width: 100%; display: block;">z</span>
    </div>

    span:after {
         display: inline-block;
         content: " ";
         width: 0;
         height: 0;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
         border-top: 5px solid #aaaaaa;
         padding-top: 2px;
         position: relative;
   }

http://jsfiddle.net/my272eze/

如果我改为在容器上执行此操作 (#wrap)，则箭头会出现在新行上。

http://jsfiddle.net/my272eze/3/

我如何将它放入容器中？

Answer 1

尝试添加

float: right;
margin: 6px;

伪元素

Fiddle Example