使用 css 悬停外部 div 时变换底部边框

Question

我现在尝试了很长时间才能让它发挥作用。 "Mehr erfahren" 下的 "line" 应该从 0% 到 100%，但我从 100% 到 0%。谁能找出错误？

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);
 
}


.lwb-col--link {
   font-weight: 500;
 position: relative;
 display: inline-block;
}
.lwb-col--link::after{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
}
.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(0);
    transform-origin: left center;
}

<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

Answer 1

编辑：我将border-bottom: 2px solid #E5E9EC;移动到.lwb-col--link，将border-bottom: 2px solid #57B0FB;添加到.lwb-col:hover .lwb-col--link::after并使用transform 属性正常和悬停。它有效，但 border-bottom inital 并没有消失，它只是被覆盖了。

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);
}

.lwb-col--link {
    font-weight: 500;
    position: relative;
    display: inline-block;
    border-bottom: 2px solid #E5E9EC;
}
.lwb-col--link::after{
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
    transform: scaleX(0);
}

.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(1);
    transform-origin: left center;
    border-bottom: 2px solid #57B0FB;
}

<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

Answer 2

将 transform: scaleX(0); 移动到默认状态。

将transform: scaleX(1);添加到悬停状态。

/* DEBUG */
.lwb-col {
    transition: box-shadow 0.5s ease;
}
.lwb-col:hover{
    box-shadow: 0 15px 30px -4px rgba(136, 155, 166, 0.4);
 
}


.lwb-col--link {
   font-weight: 500;
 position: relative;
 display: inline-block;
}
.lwb-col--link::after{
    border-bottom: 2px solid;
    bottom: -3px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    width: 100%;
    color: #E5E9EC;
    transform: scaleX(0);
}
.lwb-col:hover .lwb-col--link::after {
    border-color: #57B0FB;
    display: block;
    z-index: 2;
    transition: transform 0.3s;
    transform: scaleX(1);
    transform-origin: left center;
}

<div class="lwb-col">
  <h2>Webdesign</h2>
  <p>Steigern Sie Ihre Bekanntheit im Web mit individuellem &amp; professionellem Webdesign. Organisierte Codestruktur, sowie perfekte SEO Optimierung und jahrelange Erfahrung sprechen für uns.</p>
<span class="lwb-col--link">Mehr erfahren</span>
</div>

使用 css 悬停外部 div 时变换底部边框

transform bottom border on hover the outer div with css

css

transition

hover

onhover

css-transitions