:before and :after pseudo elements to receive transition effect - css

Question

I am trying to build a parallelogram background that only appears on hover in a menu item. For the shape, I am using :before and :after pseudo-elements, however I cannot apply the same transition effect on them. Does anyone knows what could I do to solve this problem?
Here is the code until the moment:
div {
float:left;
background-color:#fff;
margin: 20px;
transition:.5s;
}
.testClass {
margin-top: 0px;
margin-left: 0px;
padding: 5px 10px;
display: block;
background-repeat: no-repeat;
background: #fff;
position: relative;
transition:.5s;
}
.testClass:hover {
background: gold;
transition:.5s;
}
.testClass:hover:before {
content: '';
position: absolute;
top:0;
left:-15px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 29px 15px;
border-color: transparent transparent gold transparent;
}
.testClass:hover:after {
content: '';
position: absolute;
top:0;
right:-15px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 15px 0 0;
border-color: gold transparent transparent transparent;
}
<div >
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>
</div>

Answer 1

What about an easier way with only one element to create the shape:
div {
float: left;
margin: 20px;
transition: .5s;
}
.testClass {
margin-top: 0px;
margin-left: 0px;
padding: 5px 10px;
display: block;
background: #fff;
position: relative;
transition: .5s;
z-index: 0;
}
.testClass:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: -10px;
right: -10px;
bottom: 0;
opacity: 0;
background: gold;
transform: skew(-20deg);
transition: .5s;
}
.testClass:hover::before {
opacity: 1;
}
<div>
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>
</div>