居中:: after alement

Question

我在将:: after元素居中时遇到问题。你们能帮我吗？ 有我的代码

button{
 position: relative;
}
button::after{
 content: "Check answer";
 position: absolute;
 min-width: 100px;
 top: 20px;
 padding: 10px 15px;
 border-radius: 4px;
 background: #575757;
 color: #fff;
 display: block;
}

<button>Check answer</button>

Answer 1

我想水平居中，尝试

button::after{
 content: "Check answer";
 position: absolute;
 min-width: 100px;
 top: 20px;
 padding: 10px 15px;
 border-radius: 4px;
 background: #575757;
 color: #fff;
 display: block;
 /* this */
 left:50%;
 transform: translateX(-50%);
 /***/
}

Answer 2

如果我没看错：

button {
  min-width: 100px;
  top: 20px;
  padding: 10px 15px;
  border-radius: 4px;
  background: #575757;
  color: #fff;
  display: block;
}

button::after {
  content: "Check answer";
}

<button></button>