Div hover function resize css - html

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

Answer 2

Basically you want to change the styling on one element while hovering another. This can be done the following way:
#teamspeak_image a:hover ~ #teamspeak_box {
background-color: #C62828;
transition: all 0.5s ease;
}
See this answer for more info. And you might consider adding a border-bottom: 5px solid red; to the box instead of background-color.

Answer 3

In order for the red line to be the width of the grey box and 5px tall,
use the css property to set the display of the grey box to block. Thus, for the grey box use:
display:block;
height:5px;
After that you can set other css properties for the links inside the grey box.