在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>  

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>  

＆＃13;

＆＃13;

＆＃13;

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>

更好......不要仅使用额外的span 来设置样式，而是使用伪元素......但同样的原则适用。

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>