Div hover function resize css

Question

I've created a div that contains a box, within that box is text and a link. What I want is when a person hovers over this box with the link, a red line appears on the bottom of the box. At the moment I've managed this but I want the red line to be the width of the grey box and only 5 pixels in height.

#teamspeak_box {
  width: 159px;
  height: 43px;
  background: #212121;
  bottom: 82px;
  right: 76px;
  position: absolute;
  border-radius: 0px 0px 5px 5px;
}
#teamspeak_box_2 {
  width: 43px;
  height: 43px;
  background: #313131;
  bottom: 82px;
  right: 191px;
  position: absolute;
  border-radius: 0px 0px 0px 5px;
}
#teamspeak_text {
  color: white;
  bottom: 93px;
  right: 66px;
  position: absolute;
}
#teamspeak_image {
  bottom: 80px;
  right: 104px;
  position: absolute;
}
#teamspeak_image a:hover {
  background-color: #C62828;
  transition: all 0.5s ease;
}

<div id="teamspeak_box"></div>

<div id="teamspeak_box_2">

</div>
<div id="teamspeak_text">
  <p>TEAMSPEAK
    <P/>
</div>


<div id="teamspeak_image">
  <a href="ts3server://craft412.serveminecraft.net:9987">
    <img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
  </a>
</div>

Answer 1

I find your element positioning insane. Try this one

HTML

<a href="ts3server://craft412.serveminecraft.net:9987">
  <div class="teamspeak-box">
    <div class="teamspeak-icon">
      <img src="http://filepic.ru/file/1436899103.png" alt="">
    </div>
    <p>TEAMSPEAK</p>
  </div>
</a>

CSS

.teamspeak-box{
  width: 159px;
  height: 43px;
  background: #212121;
  border-radius: 0px 0px 5px 5px;
  overflow: hidden;
  color: white;
  display: table;
}
.teamspeak-icon{
  width: 43px;
  height: 43px;
  background: #313131;
  display: table-cell;
  transition: all 0.5s ease;
}
.teamspeak-icon img{
  width: 100%;
}
.teamspeak-box p{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.teamspeak-box:hover .teamspeak-icon{
  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  -moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
}

Run this code on JSFiddle