在悬停时更改内容时CSS淡入淡出过渡[关闭]

Question

我有一个按钮，可以在悬停时更改文本。它是通过使用CSS content属性和psuedo元素创建的，但它直接切换。我希望旧文本淡入新文本。

编辑：这是我的代码。

.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>