Efekt hover ma być bardziej oddalony od tekstu

Question

Witam.

Po najechaniu kursorem na dany tekst, efekt hover jest prawie przyczepiony do tekstu.

Wygląda to w ten sposób:

https://jsfiddle.net/Krzysiek_35/xmfz4h6k/55/

Chciałbym, aby ta animacja była uruchamiana powiedzmy 5px pod tekstem.

Prawdopodobnie za to odpowiada:

.link-2:before
{
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #76DAFF;
	transform: translateX(-100%);
}

gdzie height ustala grubość tej animacji. Gdy dopisuję top (wartości dodatnie albo ujemne w px) - jest jeszcze gorzej, a gdy do bottom wpisuję wartości dodatnie albo ujemne w px - też jest gorzej.

Czy da sie zrobić tak, aby ta animacja była uruchamiana powiedzmy 5px pod tekstem?

Answer 1

Cześć,

bottom działa prawidłowo. Masz po prostu dodaną klasę overflow: hidden na link2. Dlatego nie widać bottom.

Żeby to działało prawidłowo, możesz dodać np padding dla elementu a, i wtedy bottom ustawione na 0 będzie poniżej tekst.

Przykład:
https://jsfiddle.net/3wort7xm/

Comments

Teraz ta animacja uruchamia sie prawidłowo pod tekstem.

Wystarczyło tylko dopisać w CSS:

.default-menu-2 li a
{
	padding: 5px 0px;
}

...i teraz ta animacja uruchamia sie 5px pod danym tekstem.

Tak to aktualnie wygląda:

https://jsfiddle.net/Krzysiek_35/xmfz4h6k/56/

Answer 2

@Alterwar, ale mu chyba chodzi o to, żeby :hover działał tylko w obrębie tekstu, a nie poza granicami.

body {
  background: darkgoldenrod;
  margin: 0;
  padding: 0;
}

.panel-1 .default-menu-2 {
  position: absolute;
  top: 20%;
  left: 10%;
  right: 10%;
  background-color: #000000;
  width: 80%;
  text-align: center;
}

.default-menu-2 li {
  display: inline-block;
}

.default-menu-2 li a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: #DDDDDD;
  font-weight: bold;
}

.link-2 {
  display: inline-block;
}

.a2 {   
  position: absolute;
  height: 7px;
  width: 100%;
  background: #76DAFF;
  transition: 2s;
  left: 0;
  top: -20px;
}

.a1:hover + .a2 {
  width: 0%;
}

.b2 {
  width: 0%;
}

.b1:hover + .b2 {
  width: 100%;
}

li {
  display: flex;
  flex-flow: row wrap;
}

li > * {
  flex: 1 100%;
  padding: 1px;
}

<div class="panel-1">
  <div class="default-menu-2">
    <li><a href="#" class="link-2"><span class="a1">Strona główna</span><span class="a2"></span></a></li>
	<li><a href="#" class="link-2"><span class="b1">Strona</span><span class="a2 b2"></span></a></li>
	<li><a href="#" class="link-2"><span class="a1">główna</span><span class="a2"></span></a></li>
	<li><a href="#" class="link-2"><span class="a1">Str główna</span><span class="a2"></span></a></li>
  </div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/