动态对齐：根据父项长度

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%;
            }