将底部边框悬停在带有css的外部div上进行转换

Question

我试了很长时间才让它发挥作用。"Mehr erfahren"下的"线"应该从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

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

Answer 2

EDIT：我将border-bottom: 2px solid #E5E9EC;移动到.lwb-col--link，将border-bottom: 2px solid #57B0FB;添加到.lwb-col:hover .lwb-col--link::after，并在法线和悬停上使用transform属性。它起作用，但边界底部初始值并没有消失，它只是覆盖。

/* 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>