HTML <li>标签上的焦点效果（Wordpress）答案

【问题标题】：Focus effect on HTML <li>tag ( Wordpress)HTML <li>标签上的焦点效果（Wordpress）
【发布时间】：2022-01-01 11:41:04
【问题描述】：

在 wordpress 中单击或激活动画时，css 或 JavaScript 有什么方法可以设置动画边框吗？

我想在 ul 列表上制作这种效果。我正在使用过滤器产品，我不能在 li 元素中放置按钮。

.btn{
  border:none;
  color: #FFFFFF29;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.5rem 0;
  font-size:65px;
  transition: .3s;
  transition-delay: 0.5s;
}

.btn::before{
   content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #fff;
  transform: translateX(-105%);
  transition: transform 0.5s ease-in-out;
  transition-delay: 0.5s;


}

.btn:focus::before{
   transform: translateX(0);
}

.btn:focus{
  transition:.3s;
  color:#fff;
  transition-delay: 0.5s;
  outline: none;
  background-color: transparent;

}
.btn:not(hover){
    color: #FFFFFF29 ;
    background-color: #1a1a1a;
}
ul {
     background-color:#1a1a1a;
    list-style-type: none;
}

    <ul>
    <li><button class="btn" >Digital Marketing</button></li>
    <li><button class="btn" >Sviluppo</button></li>
  </ul>

【问题讨论】：

你能把你的问题说清楚吗？ “动画边框”是什么意思
我正在寻找一种将焦点放在 li 项上的方法。但我不能在 html 中这样做，因为列表项是从 WordPress 中的过滤器插件中获取的，所以我只能编辑 css和js

标签： css wordpress content-management-system html-lists elementor

【解决方案1】：

.btn:not(hover){
    color: var(--e-global-color-secondary) !important;
    background-color: #1a1a1a;
}

【讨论】：

【解决方案2】：

Elementor Class Add into a tag

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。