li.current:after {
border-width: 1px 1px 0 0;
content: ' ';
background: #256f9e;
display: block;
height: 13px;
position: absolute;
width: 10px;
top: 6;
margin:0px auto;
z-index: 99;
transform: rotate(-224deg);
-webkit-transform: rotate(-224deg);
-moz-transform: rotate(-224deg);
-ms-transform: rotate(-224deg);
-o-transform: rotate(-224deg);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
text-align: center;
float: center;
}
我已经创建了一个小三角形(或者一个已经被旋转的框看起来像一个三角形)。我希望它位于< li>< / li>但不能使用我的正常方法。
失败的东西(没有特定的顺序)：
text-align: center; float: center; margin: 0 auto; margin-right: 0; margin-left: 0;
我失踪了什么我怀疑它很重要，但我使用AngularJS。想到我会提到它，以防在Angular&伪选择器(我怀疑)。
谢谢。
解决方法
这里有一些工作代码。 View it on JSFiddle
#tool-menu li {
...
position: relative;
}
li.current:after {
...
position: absolute;
width: 10px;
top: 6;
left: 50%;
margin-left: -5px;
}
让我们分解这里发生了什么。
设置新的包含块
在您的原始小提琴中，假元素绝对相对于视口定位。一个例子可能是显示这是什么意思的最好方式，为什么我们不想这样做。考虑将其设置为顶部：0.这将保持锁定到浏览器窗口顶部(或在这种情况下为JSFiddle框架)，而不是父级(li)。所以，如果我们的菜单恰好在页面的底部，甚至是移动的话，那么这个伪元素就会独立于它而浮动。
当您未明确设置任何父元素的位置时，这是绝对定位的元素的默认行为。我们想要的是相对于父母定义其位置。如果我们这样做，那么假元素会与父母粘在一起，无论它在哪里。
为了实现这一点，您需要设置父级#工具菜单li，以明确定位(这意味着将其设置为除position：static之外的任何内容)。如果您选择使用position：relative，它不会更改计算的父页面在页面上的位置，并且做我们想要的东西。所以这就是为什么我用那个。
在技术上，我们在这里做的是为孩子创建一个新的containing block。
定位假设
现在，我们的绝对定位将与父母决定，我们可以利用我们可以使用百分比来定义孩子的位置。在这种情况下，你想要它居中，所以我把它设置为：50％。
但是，如果你这样做，你会发现这个比例在50％左右。这不是我们想要的 – 我们希望假元素的中心在中间。这就是为什么我添加了负余额左边。这样一来，它会使中间线与父母的中心对齐。
一旦我们这样做，它的中心！辉煌！
为什么没有我的保证金：自动;工作？
保证金的自动值由相当复杂的算法计算。有时，它计算为0.我从经验知道，这是一个这样的情况发生，虽然我还没有追踪我的方式通过算法来确切地了解为什么。如果你想穿过它，take a look at the spec most browsers have most likely implemented.
