How to make an animated strip with the help of pseudo-elements?

I want to do when you hover over the block, lower it from the middle and sides left the band.

Will explain below, see example: https://jsfiddle.net/ccopdwvh/

Created a pseudo-element is put him in the middle, so it was not visible, and when administered via trnansition stretched its parent element, and change the color. The problem is that is not working smooth animations, I need to strip from the middle, gradually out to the edges.
Thought to put a pseudo-El. in the middle, give it width:0; margin:0 auto; and when you hover width:100%; but this is also not working.
June 10th 19 at 15:31
1 answer
June 10th 19 at 15:33
Solution
https://jsfiddle.net/ccopdwvh/1/
There are not transitions

Find more questions by tags Web DevelopmentCSS