Lerian Lerian - 4 months ago 23
CSS Question

Slash before text in CSS

I trying do somethink like this: http://i.imgur.com/CaExErT.png

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


but when I try scale this line, it's move all links.
I want to scale this line from center and without move all elements.

https://jsfiddle.net/xgzqt0hj/

Answer

Don't adjust the font-size, use a scale transform instead.

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>

Even better...don't use an extra span just for styling, use a pseudo-element instead...but the same principal applies.

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>

Comments