要解决背景颜色过渡和before/after透明度过渡同步的问题，可以使用CSS的transition属性和伪元素来实现。

首先，在需要进行过渡的元素上添加transition属性，指定过渡的属性及过渡时间。例如，我们可以将背景颜色的过渡时间设置为1秒：

.element {
  background-color: red;
  transition: background-color 1s;
}

接下来，我们可以使用伪元素:before和:after来创建额外的元素，然后对它们进行过渡。为了使它们与原始元素同步，我们需要为它们设置相同的过渡属性和过渡时间，并将它们的opacity属性设置为0：

.element:before,
.element:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

然后，我们可以在需要过渡的时候使用JavaScript来动态地添加或移除这些伪元素。例如，当鼠标悬停在元素上时，我们可以添加伪元素并将它们的opacity属性设置为1：

var element = document.querySelector('.element');

element.addEventListener('mouseover', function() {
  element.classList.add('active');
});

element.addEventListener('mouseout', function() {
  element.classList.remove('active');
});

最后，在CSS中定义.active类来设置伪元素的opacity属性为1：

.element.active:before,
.element.active:after {
  opacity: 1;
}

这样，当鼠标悬停在元素上时，背景颜色和before/after元素的透明度都会同步进行过渡。

完整的示例代码如下所示：

这样，当鼠标悬停在元素上时，背景颜色和before/after元素的透明度会同步进行过渡。