html - 边框没有回来，从 EDGE 中的元素中删除了悬停

Question

我希望在从元素中移除悬停后边框回到正常位置，这在 chrome、Firefox 中工作正常，但在 EDGE 中不工作

  <span class="cta-content">
       <span class="cta-text">demo</span>
       <span class="icon">i</span>
   </span>

.cta-content{
            background: linear-gradient(0deg, blue, blue) bottom left no-repeat;
            background-color: none !important;
            background-size: 0px 1px;
            transition: 0.5s background-size;
            text-decoration: none;
            display: inline !important;
        }
        .cta-content:hover{
            background-size: 100% 1px;
            color:red;
        }

  <span class="cta-content">
           <span class="cta-text">demo</span>
           <span class="icon">i</span>
       </span>

Answer 1

始终添加 HTML 呈现引擎。

.cta-content {
  background: linear-gradient(0deg, blue, blue) bottom left no-repeat;
  background-color: none !important;
  background-size: 0px 1px;
  -webkit-transition: 0.5s background-size;
  -moz-transition: 0.5s background-size;
  -o-transition: 0.5s background-size;
  transition: 0.5s background-size;
  text-decoration: none;
  display: inline !important;
}

.cta-content:hover {
  background-size: 100% 1px;
  color: red;
}

<span class="cta-content">
       <span class="cta-text">demo</span>
<span class="icon">i</span>
</span>