Html 伪元素裁剪

我不知道为什么我的三角形伪元素会被裁剪。我一直在附近玩，但没有结果。它应该是一个经典的三角形，我的直角在哪里？） 求求你，救命！

埃因斯
茨威
德雷
维尔

#滑块{
边框：1px实心#999；
位置：相对位置；
宽度：195px；
}
#滑块：之后{
内容：“；
边框底部：14px实心透明；
左边框：14px纯黑；
边框顶部：14px实心透明；
高度：14px；
左：190px；
位置：绝对位置；
顶部：20px；
宽度：14px；
}

它不会被“切断”。元素的高度会拉长左侧边框：

您的箭头在垂直方向上的“拉伸”程度大于在水平方向上的“截断”

确保您的图元没有高度：

#滑块{
边框：1px实心#999；
位置：相对位置；
宽度：195px；
}
#滑块：之后{
内容：“；
边框底部：14px实心透明；
左边框：14px纯黑；
边框顶部：14px实心透明；
/* ----- */
身高：0；
字号：0；
/* ----- */
左：190px；
位置：绝对位置；
顶部：20px；
}

埃因斯
茨威
德雷
维尔

<div id="slider">
  <ul id="list">
    <li>Eins</li>
    <li>Zwei</li>
    <li>Drei</li>
    <li>Vier</li>
  </ul>
</div>

  #slider {
    border: 1px solid #999;
    position: relative;
    width: 195px;
  }

 #slider:after {
  content: " ";
  border-bottom: 14px solid transparent;
  border-left: 14px solid black;
  border-top: 14px solid transparent; 
  height: 14px;
  left: 190px;
  position: absolute;
  top: 20px;
  width: 14px;
 }