How to use transform scale property to explode the content of a box without changing the border?

I’m trying making a animation using transform scale property to get the content of a box bigger. The problem is the border of the box becomes bigger as well. I only want to change the size of the content but the border. The code is like this:

HTML:

<span id='box'>content</span>

css:

#box{
  position: absolute;
  left: 240px;
  border-bottom: 1px dashed white;
  width: 120px;
  height: 120px;
  text-align:center;
  font: bold 90px Tahoma;
  color: white;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.8s;
}
.explode{
  -webkit-transform: scale(1.2);
}

Javascript:

$('#box').addClass('explode');

So the problem is after class explode is added, the border of the box gets bigger too. Is there any way to only get content bigger without changing the border.

Since you added the border to the element, the border will also increase, so you can add another span with class .wrap which will contain the border and wont get scaled.

JSFiddle Demo

CSS:

#box{
  position: absolute;
  text-align:center;
  font: bold 90px Tahoma;
  color: white;
  width: 120px;
  height: 120px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.8s;
}
.explode{
  -webkit-transform: scale(1.2);
}
#wrap{
  position: absolute;
  left: 240px;
  width: 120px;
  height: 120px;
  border-bottom: 1px dashed black;
  width: 120px;
  height: 120px;
  display:inline-block;
}