css实现选中条中间展开效果

Question

如图，选中的时候会有一个红色条条，如果让选中的时候，红色条由中间向两边展开？

Answer 1

已经解决了，关键代码：

 transform-origin: center center;
  transform: scale3d(0, 1, 0);
  transition: all .5s;

然后当前条条的时候：

 transform: none;