对齐宽度 0 按钮，其宽度取决于伪元素宽度到中心 更新

如何解决对齐宽度 0 按钮，其宽度取决于伪元素宽度到中心 更新

对齐中心应该是一项简单的任务。但是，我制作了一个奇怪的按钮，无法将其与父项的中心对齐。

#wrapper{
    position: fixed;
    top: 25vh;
    left: 25vw;
    height: 50vh;
    width: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border: 1px solid;
}

/* square button */
.square-button {
  font-size: 20px;
  font-family: Arial;
  text-decoration: none;
  text-transform: uppercase;
  transform-style: preserve-3d;
  position: relative;
  transition: .5s;
}

.square-button::before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 40px;
  background: #fff;
  color: #000;
  border: 3px solid #000;
  transition: .5s;
  transform-origin: right;
  transform: translateX(-100%) rotateY(90deg);
}

.square-button::after {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 40px;
  background: #000;
  color: #fff;
  border: 3px solid #000;
  transition: .5s;
  transform-origin: left;
  transform: translateX(0) rotateY(0deg);
}

.square-button:hover::before {
  transform: translateX(0) rotateY(0deg);
}

.square-button:hover::after {
  transform: translateX(100%) rotateY(90deg);
}

/* squre button customize */
#setting-apply::before {
  border: 3px solid #f7786b;
  color: #f7786b;
}

#setting-apply::after {
  border: 3px solid #f7786b;
  background: #f7786b;
}

#setting-cancel::before {
  border: 3px solid #80ced6;
  color: #80ced6;
}

#setting-cancel::after {
  border: 3px solid #80ced6;
  background: #80ced6;
}

<div id="wrapper">
    <a id="setting-apply" class="square-button" href="#" title="apply"></a>     
    <a id="setting-cancel" class="square-button" href="#" title="cancel"></a>       
</div>

我尝试将 display: flex; flex-direction: column; justify-content: space-around; 应用于父元素，但没有奏效。

通过使用 css 或 js，有没有办法让这个按钮居中对齐？

感谢任何建议。

---

更新

在 js 中，有没有办法选择伪元素，以便我可以使用 getBoundingClientRect 动态设置宽度？ （以下代码不正确）

const button = document.querySelector('.square-button');
const button_before = button.before;
console.log(button_before.getBoundingClientRect());