下划線CSS鏈接移動寬度

Question

我有此CSS代碼，在大型桌面上也能正常工作。 一旦我切換到移動設備，下划線就位於整個元素的下方。 我只想在句子中加上下划線。 為實現這一目標的任何幫助將受到歡迎。 這是HTML：

a class="underline-link" 
        href="#">Made with Lorem Ipsum Dolor Sit Amed 


And here is the CSS:

.underline-link:after {
 background-color: #0982ae
 }
.underline-link:hover {
color: #0982ae
}
.underline-link:after {
content: "";
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: all .15s cubic-bezier(.39, .575, .565, 1);
transition-property: opacity, transform;
width: 100%
}
.underline-link:focus {
outline: none
}


.underline-link {
font-family: -apple-system, BlinkMacSystemFont, segoe ui, avenir next, 
avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: #b3b3b3;
cursor: pointer;
position: relative;
display: inline-block;
color: #087096;
font-size: 14px;
font-weight: 400;
text-decoration: none;
-moz-osx-font-smoothing: grayscale
}
.underline-link:hover {
text-decoration: none
}
.underline-link:focus:after, .underline-link:hover:after {
opacity: 1;
transition-delay: .2s;
transition-duration: .15s;
transform: translateY(-3px) translateZ(0)
}

實時預覽： 在Codepen上

Answer 1

好的，我發現了問題，這與位置有關：絕對； 如果更改底部，則可以檢查行的位置：0; 至頂部：0； 我必須考慮如何欺騙它，如果有解決方法，目前我還沒有任何解決辦法。

 h2 > a { position: relative; color: #000; line-height:50px; text-decoration: none; } h2 > a:hover { color: #000; } h2 > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } h2 > a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } h2 > a >span { position: relative; color: #000; text-decoration: none; } h2 > a >span:hover { color: #000; } h2 > a > span:before { content: ""; position: absolute; width: 100%; height: 2px; top: 40; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } h2 > a > span:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } 

 <h2><a><span>Look at this large truncated text effect with css, it's magic! </span></a></h2> 

我嘗試添加一個跨度並設置相同但在最上面，但是我無法擺脫這條線的移動方式，由於顯示和位置的緣故，它保持不變，所以...我認為這就像您認為的那樣是行不通的不好意思