How to change the value of an html button using CSS only - css

Question

I do not have access to the HTML file, I can only use CSS.
I have:
input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}
<input type="submit" value="Register" id="btn" class="submit-btn">
I want to change the value of this HTML button using CSS.
I found some code online, but it didn't seem to work.
I tried:
input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}
input.submit-btn{
text-indent: 200%;
color: transparent;
}
input.submit-btn::after{
content: "Submit";
text-indent: 0;
}
<input type="submit" value="Register" id="btn" class="submit-btn">
I have been able to successfully not display the word REGISTER. However, I haven't been able to display the word SUBMIT inside the button.
All I want is to replace the text/value of this button.
Please let me know how to do this using CSS only

Answer 1

Input tags do not support ::after and ::before pseudo element
try this code
.submit-container {
position: relative;
display: inline-block;
}
.submit-btn {
background-color: black;
color: transparent;
border: none;
padding: 15px 35px;
border-radius: 5px;
}
.submit-container::before {
content: 'SUBMIT';
display: block;
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="submit-container">
<input type="submit" value="Register" id="btn" class="submit-btn">
</div>

Answer 2

Just remove this code, it will work
input.submit-btn {
text-indent: 200%;
color: transparent;
}