如何使用CSS psuedo元素淡入更改的文本

Question

我有一个按钮，可以更改悬停文本。它是通过使用CSS Content属性和伪元素而创建的，但是当我悬停在文本上时，它突然更改。相反，我希望旧文本淡入新文本。

编辑：这是我的代码。

.btn {
  background-color: #03a9f4;
  padding: 12px 18px;
  margin: 40px;
  font-size: 1.2rem;
  font-weight: 700;
}
#launchtrailerbtn:before {
  content: "LAUNCH TRAILER";
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
}
#launchtrailerbtn:hover:after {
  content: "CLICK TO VIEW TRAILER";
}
#launchtrailerbtn:hover:before {
  font-family: "Font Awesome 5 Free";
  content: "f04b";
  margin-right: 10px;
}

<a id="launchtrailerbtn" class="btn btn-primary"></a>

由于新文本更长，所以我也希望按钮的背景慢慢延伸到新的长度。

Answer 1

没有特定代码，我无法真正为您提供很多帮助。但是使用opacity和transition是您可以做的示例，以使文本"淡出"。

div {
  background: pink;
  padding: 5px 25px;
  border-radius: 25px;
  text-align: center;
  width: max-content;
}
div::after {
  content: 'I faded!';
  opacity: 0;
  transition: all 1s;
}
div:hover::after {
  opacity: 1;
}

<div></div>

Answer 2

使用 opacity显示和隐藏过渡。希望它对您有帮助。谢谢

.btn {
  background-color: #03a9f4;
  padding: 12px 18px;
  margin: 40px;
  font-size: 1.2rem;
  font-weight: 700;
}
#launchtrailerbtn:before {
  content: "LAUNCH TRAILER";
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
 opacity:1
}
#launchtrailerbtn:after {
  content: "CLICK TO VIEW TRAILER";
   transition: all 1s ease;
  opacity:0;
  margin-left: -186px;
}
#launchtrailerbtn:hover:after{
opacity:1;
transition: all 1s ease;
}
#launchtrailerbtn:hover:before{
opacity:0;
}

<a id="launchtrailerbtn" class="btn btn-primary"></a>