How to change the value of a button through CSS

Question

So here's the code:

<form id="my-button" action="#" method="post">
        <input type="submit" name="sample-button" value="Hello">
</form>

I need to be able to change the value through CSS. No clicking or hovering. Just need to replace it through CSS.

I tried doing this, but it's not working.

#my-button input[type=submit]:before{
    content:"";
}
#my-button input[type=submit]:after{
    content:"HI";
}

Answer 1

If you want it for display/appearance purposes, you can try something like this, using pure css:

Example in JSFiddle

it won't change the actual submit's value, but for display purposes it works fine.

input[type=submit] {
  color: transparent;
}

#my-button {
  display: inline-block;
  position: relative;
}

#my-button:after {
  content: "World";
  position: absolute;
  display: block;
  color: black;
  top: 1px;
  left: 1px;
  pointer-events: none;
}

<form id="my-button" action="#" method="post">
  <input type="submit" name="sample-button" value="Hello">
</form>