html - 动态对齐 :after according to parent length

Question

http://jsfiddle.net/VpW5x/1141/

.one-line {
  position: relative;
}

.one-line:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px;
  background: red;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
    left: 100%;
}

如何使右箭头出现在文本之后，即使文本真的像示例中那样长？

Answer 1

使用这个 css 会帮助你

          .one-line {
               position: relative;
               display:inline-block;
               vertical-align:top;  
                 }

            .one-line:after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 25px;
            background: red;
            clip-path: polygon(100% 50%, 0 0, 0 100%);
            left: 100%;
            }