косой черты перед текстом в CSS

Question

Я пытаюсь сделать somethink так:

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