html - 下划线 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)
}

实时预览:On Codepen

Answer 1

好的，我找到了问题，它是关于position:absolute；如果更改 bottom: 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>

我尝试添加一个跨度并设置相同但在顶部但我无法摆脱这条线的移动方式，它由于显示和位置而保持不变所以......我认为这可以，正如你所想的那样工作，抱歉。