为div中的每个数字添加边框

I'm not sure if this is possible but I would like to add a border to each number in a div.

I know how to add a border to a div but I would like that each number in a div to have a border.

Example:

<div id="borders">12345</div>

The output should look like this:

(1) (2) (3) (4) (5)

Where "()" is the border.

PS: I don't want to use a separate div for each number because this number will be a php code, like this:

<div id="borders"><?php $number; ?></div>

Is it possible?

I think it is impossible. You can wrap each number in a <span> and make border for spans

Not possible without adding extra markup:

Live example: http://codepen.io/anon/pen/gDHlA

Markup

<div id="borders">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

Css

span:before, span:after {
  display: inline-block;
}

span:before {
  content: "(";
}

span:after {
  content: ")";
}

I've inserted parens, of course feel free to change them with a pipe (|) or use borders applied to span elements (in this case, give them also a display, a width and a height)

About your latest requirement, your code can easily adapted like so:

$number = 12345;
$span_number = "";

foreach (str_split($number) as $key => $digit) {
  $span_number .= "<span>$digit</span>";
}

echo $span_number;
//output: <span>1</span><span>2</span>...<span>5</span>

You can use span elements like this, but you have to build all tags according to the numbers, using php string functions to split each number. There is no way to do that without tags.

<div id="borders">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

Your CSS:

#borders span {
    display:inline-block;
    border:1px solid red;
    padding:2px;
    margin:2px;/*if you want space between numbers*/
}