Question

我有这个css代码，它在大型桌面上运行良好。一旦我切换到移动设备，下划线就在整个元素之下。我想只在句子中的下划线下划线。任何有助于实现这一目标的帮助都将受到欢迎。这是HTML：

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

And here is the CSS:

matrix: include: - os: linux addons: apt: sources: - llvm-toolchain-trusty-5.0 - ubuntu-toolchain-r-test packages: - clang-5.0 - g++-7 env: MATRIX_EVAL="CC=clang-5.0 && CXX=clang++-5.0"

实时预览：On 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>

我尝试添加一个跨度并设置相同但在顶部，但我无法摆脱这条线如何移动，它因显示和位置而保持如此...我认为这，如你所想，可以工作，对不起。

下划线CSS链接移动宽度

1 个答案: