：伪元素没有出现后，即使它有内容属性

Question

这是我的网页。

提取问题后，CSS 类“updating”将在 ajax 请求正在进行时应用于 update 按钮。

该类有两个伪元素。 ( :之前 n :之后)

但是当类仅添加时 :before 出现但不出现 :after （它也有内容属性）

.update-question-form button {
display: inline-block;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
position: relative;
  overflow: hidden;
  z-index: 1;
}


/* Add animation to the update button */

.update-question-form button.updating:before,
.update-question-form button.updating::after {
  
  position: absolute;
  width: 33%;
  height: 200%;
  transform: translateX(-50%) translateY(-50%) rotate(-20deg);
  animation: slide1 1s linear infinite;
  z-index: -1;
}

.update-question-form button.updating::after {
content: " ";
background-color: #ccc;
  animation: slide2 1s linear infinite;
}

.update-question-form button.updating:before {
content: '';
background-color: #09316c;
  animation: slide1 1s linear infinite;
}

@keyframes slide1 {
  0% {
    right: -33%;
  }
  100% {
    right: 100%;
  }
}

@keyframes slide2 {
  0% {
    right: -100%;
  }
  100% {
    right: 33%;
  }
}

Answer 1

工作正常，正如您在这里看到的：

@keyframes slide1 {
  0% {
    right: -33%;
  }
  100% {
    right: 100%;
  }
}

@keyframes slide2 {
  0% {
    right: -100%;
  }
  100% {
    right: 33%;
  }
}

.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button.updating::before,
.button.updating::after {  
  position: absolute;
  width: 33%;
  height: 200%;
  transform: translateX(-50%) translateY(-50%) rotate(-20deg);
  animation: slide1 1s linear infinite;
  z-index: -1;
}

.button.updating:before {
  content: '';
  background-color: yellow;
  animation: slide1 1s linear infinite;
}

.button.updating::after {
  content: '';
  background-color: red;
  animation: slide2 1s linear infinite;
}

<button class="button updating">Click me!</button>

但是，在您的网站中，还有一些其他样式将

display: none

应用于您的

::after

伪元素：

button::after,
input[type=button]::after,
input[type=reset]::after,
input[type=submit]::after,
.button::after,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link::after,
.added_to_cart::after {
    display:none;
}