Append symbol to end of input which leads value - html

Question

I have an input field that accepts a percent, but I'd like to indicate to the user that the value they are entering is a percent.
The problem I'm having is that I'd like the percent to lead the text, so in the input it looks like this: 100% or 10000%, but I don't want the % to be part of the actual input.
Is there a way to achieve? I've tried a couple of options to do this with CSS but fall short when the % value doesn't actually adjust the placement in the input. Instead it's always appended to the very end of the input field instead of catching up with the input.
The component looks like this:
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;
}
}
Example of what I'm trying to achieve, the highlighted text in the example below is what I want the user to be able to edit, and the % to dynamically move depending on the length of the input.

Answer 1

It's easy by using data-attribute on a container (because input cannot handle :before and :after, [More here]) and CSS content:attr()
update = function(el) {
el.parentElement.setAttribute('data-value', el.value)
}
div[data-value] {
position: relative;
}
div[data-value]:after {
content: attr(data-value) "%";
position: absolute;
top: 2px; /* Borders */
left: 2px; /* Borders */
}
div[data-value] input {
color: #FFF; /* Optional bug avoid visual bugs */
}
<div data-value="0.01">
<input value="0.01" oninput="update(this)"/>
</div>
PS: I did it on vanillia but it's easy to update in React

Answer 2

Using jQuery:
$("#input").on("keyup", function(){
$(this).val($(this).val().replace(/[^0-9]/gi, '') + '%')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input"/>
This would make it so there's always a % sign at the end and they cannot remove it or add anything except for numbers!
You can also convert this to regular Javascript if you wanted to