Question

我正在尝试使用CCS在链接下添加和动画一行，但是当文本换行时，行的位置（或者，可能是它的宽度）会中断。

以下是我想要实现的目标以及问题所在：

正常行为：
断裂：

以下是插图的fiddle：https://jsfiddle.net/b1zajhs5/。要使其中断，只需缩小结果面板直到文本换行。

这是HTML使用的

<div class="centered">
  <a href="#"><span class="effect-underline">Some Text That Has to Be Quite Long To Prove the Point</span></a>
</div>

这是SCSS：

.centered {
  border: 1px solid #ccc;
  width: 80%;
  margin: 2rem auto;
  padding: 1.5rem .5rem;
  text-align:center;
}


a {
  text-decoration: none;
}


.effect-underline {
    position: relative;

  &:after {
        content: '';
        border-bottom: 1px solid;
        width: 100%;
        height: 1em;
        display: inline-block;
        margin-top: 10px;
        position: absolute;
        left: 0;
        opacity: 0;
        transition: all 0.35s;
        transform: scale(0, 1);
    }

    &:hover {
        &:after {
            opacity: 1;
            transform: scale(1);
        }
    }
}

您知道如何在文本被包裹时扩展该行与链接的整个宽度匹配吗？

Answer 1

将display: inline-block;添加到.effect-underline，以便在文字换行时将其传播。

.centered {
  border: 1px solid #ccc;
  width: 80%;
  margin: 2rem auto;
  padding: 1.5rem 0.5rem;
  text-align: center;
}

a {
  text-decoration: none;
}

.effect-underline {
  display: inline-block;
  position: relative;
}
.effect-underline:after {
  content: "";
  border-bottom: 1px solid;
  width: 100%;
  height: 1em;
  display: inline-block;
  margin-top: 10px;
  position: absolute;
  left: 0;
  opacity: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
}
.effect-underline:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

<div class="centered">
  <a href="#"><span class="effect-underline">Some Text That Has to Be Quite Long To Prove the Point</span></a>
</div>

Answer 2

显示：内联块工作的原因是因为跨度，默认情况下具有内联显示。所以，自然地，这条线直到文本的结尾，而结尾是在最后一句话，这打破了以下。

给它一个内联块的显示，一个元素就像一个块元素，所以这行直到块的结尾，而不是句子的结尾。

CSS边框（＆＃39;：后＆＃39;）在文本被包装时不扩展全宽

2 个答案: