html - CSS中文本前的斜杠

Question

我试着做这样的事情:

.line {
  font-size: 40px;
  transition: all .3s linear;
}

a:hover .line {
  font-size: 30px;
}

.text {
   position: relative;
    top: -7px;
}

<a href="#">
<span class="line">/</span>
 <span class="text">Home Page</span>
</a>  

但是当我尝试缩放这条线时，它会移动所有链接。 我想从中心缩放这条线而不移动所有元素。

a,
a:hover,
a:focus {
  text-decoration: none;
}

.line {
  font-size: 40px;
  transition: all .3s linear;
}

a:hover .line {
  font-size: 30px;
}

.text {
   position: relative;
    top: -7px;
}

<a href="#">
<span class="line">/</span>
 <span class="text">Home Page</span>
</a>  
<br>
<a href="#">
<span class="line">/</span>
 <span class="text">Another Page</span>
</a>  
<br>
<a href="#">
<span class="line">/</span>
 <span class="text">Another Page 2</span>
</a>  

Answer 1

不要调整字体大小，而是使用 scale 转换。

a,
a:hover,
a:focus {
  text-decoration: none;
}
.line {
  font-size: 40px;
  transition: all .3s linear;
  display: inline-block;
  /* required */
}
a:hover .line {
  transform: scale(0.75);
}
.text {
  position: relative;
  top: -7px;
}

<a href="#">
  <span class="line">/</span>
  <span class="text">Home Page</span>
</a>
<br>
<a href="#">
  <span class="line">/</span>
  <span class="text">Another Page</span>
</a>
<br>
<a href="#">
  <span class="line">/</span>
  <span class="text">Another Page 2</span>
</a>

更好的是......不要使用额外的跨度只是为了样式，而是使用伪元素......但同样的原则适用。

a,
a:hover,
a:focus {
  text-decoration: none;
}
a:before {
  content: '/';
  font-size: 40px;
  transition: all .3s linear;
  display: inline-block;
}
a:hover:before {
  transform: scale(0.75);
}
.text {
  position: relative;
  top: -7px;
}

<a href="#">
  <span class="text">Home Page</span>
</a>
<br>
<a href="#">
  <span class="text">Another Page</span>
</a>
<br>
<a href="#">
  <span class="text">Another Page 2</span>
</a>