附加的内容：在具有全宽的文本元素之后是相对于文本而不是元素本身

Question

我试图从头开始创建一个下拉列表

我想在容器的末尾添加一个箭头，但它一直被限制在文本的旁边。如果span是宽度为100％的块元素并且使用：在箭头之后，为什么它在文本旁边而不是在元素的末尾附近？

    <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

Answer 2

position: absolute到span标记，position relative到span：after。然后向左移动箭头：x像素数。的 JSFIDDLE

span{

    position: absolute;

}

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