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

Question

<b><a class="external" href="http://tuleburgpress.com/">Tuleburg Press</a></b>悬停时链接没有动画。所有其他链接都在悬停时动画。不工作的链接是页面上的断行，这是为什么呢？有任何想法吗？

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>

标签： htmlcsscss-transforms

Answer 1

这是因为线路被缠绕和损坏。

添加display: inline-block以确保它在同一行。不要使用<b>标签，而是使用<strong>or <span>with 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>