悬停时有 3 个链接动画，但 1 个链接没有

Question

<a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a> link 悬停时没有动画。所有其他 link 都在悬停时显示动画。不起作用的 link 是页面上的换行符，这是为什么？有什么想法吗？

a.external {
  position: relative;
  text-decoration: none;
 text-transform: uppercase;
 font-size: 1.6rem;
 font-weight: 700;
 letter-spacing: 0.04rem;
 line-height: 3rem;
 font-family: 'Roboto Mono', monospace;
 color: #ff9f43;
}

a.external:before {
  content: "";
  position: absolute;
  background-color: #ff9f43;
  width: 100%;
  height: 3px;
  bottom: -2px;
  left: 0;
  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;
}

a.external:hover:before {
 visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  color: #ff9f43;
  background-color: #ff9f43;
}

<h2>Brought to you by <b><a class="external" href="http://placeholdermag.com/">Placeholder Magazine</b></a>, the <b><a class="external" href="http://www.arts.ca.gov/">California Arts Council</a></b> and the <b><a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a></b>, <b><a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a></b>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

Answer 1

是因为线缠绕断了。

添加display: inline-block以确保它在同一行。不要使用  标签，而是使用  或  和 font-weight: bold。

a.external {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 3rem;
  font-family: 'Roboto Mono', monospace;
  color: #ff9f43;
  display: inline-block;
}

a.external:before {
  content: "";
  position: absolute;
  background-color: #ff9f43;
  width: 100%;
  height: 3px;
  bottom: -2px;
  left: 0;
  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;
}

a.external:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  color: #ff9f43;
  background-color: #ff9f43;
}

<h2>Brought to you by <b><a class="external" href="http://placeholdermag.com/">Placeholder Magazine</a></b>, the <b><a class="external" href="http://www.arts.ca.gov/">California Arts Council</a></b> and the <b><a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a></b>,
  <b><a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a></b>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

Answer 2

首先  已弃用，如果您正在使用 font-weight:700，则不需要它，也不需要 strong，因此请将其删除（因为除此之外，您还错误地关闭了标签)

问题是 a 是内联元素，因此您需要将 a 设置为块级元素，例如使用 inline-block

a.external {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 2.5rem;
  font-family: 'Roboto Mono', monospace;
  color: #ff9f43;
  display: inline-block
}

a.external:before {
  content: "";
  position: absolute;
  background-color: #ff9f43;
  width: 100%;
  height: 3px;
  bottom: -2px;
  left: 0;
  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;
}

a.external:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  color: #ff9f43;
  background-color: #ff9f43;
}

<h2>Brought to you by <a class="external" href="http://placeholdermag.com/">Placeholder Magazine</a>, the <a class="external" href="http://www.arts.ca.gov/">California Arts Council</a> and the <a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a>,
  <a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

Answer 3

由于换行，动画没有出现。但不仅如此，您错误地关闭了第一组标签。如果您仔细查看代码的第一个 link，就会更清楚：

Brought to you by
<b>
  <a class="external" href="http://placeholdermag.com/">
    Placeholder Magazine
  </b>
</a>

您正在 <a></a> 而不是 <a></a>。由于您最后打开了 a 标签，因此您需要先将其关闭，然后才关闭封装的 b 标签。

Answer 4

我认为您的第一个链接标签和粗体（强）标签的打开和关闭顺序不正确。尝试：

<h2>Brought to you by <b><a class="external" href="http://placeholdermag.com/">Placeholder Magazine</a></b>, the <b><a class="external" href="http://www.arts.ca.gov/">California Arts Council</a></b> and the <b><a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a></b>, <b><a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a></b>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

Answer 5

如果你想让你的元素保持内联内联:

还有另一种选择

a.external {
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  line-height: 3rem;
  font-family: 'Roboto Mono', monospace;
  color: #ff9f43;
  background:linear-gradient(#ff9f43,#ff9f43) bottom/0% 3px no-repeat;
  transition:all 0.3s ease-in-out;
}
a.external:hover {
  background-size:100% 3px; 
}

<h2>Brought to you by <a class="external" href="http://placeholdermag.com/">Placeholder Magazine</a>, the <a class="external" href="http://www.arts.ca.gov/">California Arts Council</a> and the <a class="external" href="http://www.stocktonca.gov/government/boardCom/sArts.html">Stockton Arts Commission</a>,
  <a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a>, and are proud to announce Stockton's first Zine making workshop series for kids.</h2>

悬停时有 3 个链接动画，但 1 个链接没有

3 links animate on hover but 1 does not

html

css

css-transforms