I have found this example of input masking, which is exactly what I want but is it possible to do this using pure CSS (no Javascript or libraries like jQuery)?
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="16-digit number">