Box border for each letter inside span

Question

I have a span like below

    <span style="font-size:18px; font-weight:bold;">8342</span>

How can I put a black box around each number inside that span using css?

I want it just like below image

Answer 1

Please check this Demo

<span style="font-size:18px; font-weight:bold;" class="test">8342</span>

.pwn{
 border: 2px solid black ;
  display: inline;  
}

var text= $(".test").html();
 $(".test").html('');
for(i=0;i<=text.length-1; i++)
{
var html = text.substr(i,1);
var sp="<span style='font-size:18px; font-weight:bold;' class='pwn'>" + html
sp+=" </span> &nbsp;";
$(".test").append(sp);
}