将符号附加到导致值的输入结尾

我有一个接受百分比的输入字段,但是我想告诉用户他们输入的值是百分比。

我遇到的问题是我希望百分比引导文本,所以在输入中看起来如下: 100% 或 10000% ,但我不想 % 作为实际投入的一部分。

% 值实际上并不调整输入中的位置。相反,它总是附加到输入字段的最末尾,而不是赶上输入。

组件如下所示:

class Input extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: false,
    }
  }

  render() {
    return (
    <div>
      <input 
        value={this.props.value} >
      </input>
    </div>
    )
  }
}

CSS:

div {
  input:after {
    content: '%';
    position: absolute;
    top: 3.4rem;
    z-index: 9999;
    color: blue;
    font-size: 2rem;

  }
}

% 根据输入的长度动态移动。