Efekt hover ma być na szerokości tekstu, a jest zbyt szeroki

Question

Witam.

Po najechaniu kursorem na dany tekst, efekt hover jest zbyt szeroki.

Wygląda to w ten sposób:

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

Czy da sie zrobić tak, aby ten efekt hover był uruchamiany tylko na szerokości danego tekstu?

Comments

Zmniejsz szerokosc na Hover tak aby miala ta sama co tekst i wycentruj.

---

Chodzi mi o Link Hover Effect 3:

https://codepen.io/P233/pen/EaGAl

Spójrz jak sie uruchamia ten Link Hover Effect 3. Zajedź niżej i po lewej masz ten uruchamiany efekt. O takie uruchamianie mi chodzi.

Answer 1

.panel-1 .default-menu-2 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: transLateX(-50%) transLateY(-50%);
  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;
  font-size: 16px;
  padding: 0 21px;
}

.default-menu-2 li span:before, li span:after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

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

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

span {
  border: 1px solid violet;
}

span:hover::before {
  transform: translateX(0);
}

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

Możesz dopracować to menu, bo przy powiększeniu Ctrl++ zostaje na ekranie piksel/piksele.

Comments

Dalej tak samo uruchamia sie ten hover. Pojawiły sie tylko pionowe fioletowe kreski pokazujące tekst od początku do końca. Chodzi mi o to, aby ten hover był uruchamiany tylko pomiędzy tymi fioletowymi kreskami.

---

Nie za bardzo wiem kiedy ta animacja ma się uruchomić. Jak najedzie się na lewo i prawo od tego fioletowego bordera?

---

Ta animacja ma sie uruchomić, gdy najedzie sie tylko na tekst (od lewego do prawego fioletowego bordera).

---

body {
  background: darkgoldenrod;
  margin: 0;
  padding: 0;
  height: 100%;
}

.fir {
  text-align: center;
  background: lightblue;
}

.sec {
  left: 0;
  width: 50%;
  position: absolute;
  text-align: center;
  display: inline-block;
}

.sec::before {
  content: '';
  width: 0%;
  height: 4px;
  left: 0;
  background: green;
  top: 0px;
  position: absolute;
  transition: 2s;
}

.fir:hover .sec::before {
  width: 200%;
}

.fir2 {
  background: orange;
  width: 16%;
}

.fir3 {
  background: orange;
  width: 16%;
}

.row {
  display: flex;
}

.col, .col1 {
  padding: 0;
  width: 50%;

}

<div style="" class="letters">
  <div class="row"><span class="fir2 col1"></span><span class="fir col">abc<span class="sec"></span></span><span class="fir3 col1"></span></div>
</div>

<div style="" class="letters">
  <div class="row"><span class="fir2 col1"></span><span class="fir col">abc<span class="sec"></span></span><span class="fir3 col1"></span></div>
</div>

<div style="" class="letters">
  <div class="row"><span class="fir2 col1"></span><span class="fir col">abc<span class="sec"></span></span><span class="fir3 col1"></span></div>
</div>

Sorry, że tak niechlujnie napisałem, ale myśle, że będziesz wiedział co i jak.

---

Kurde, za dużo tego Twojego kodu i trzeba wprowadzać sporo poprawek. Więcej kodu niż to warte.

Czy nie da sie tego ogarnąć na podstawie tego mojego krótszego kodu?

---

Teraz ta animacja uruchamia sie prawidłowo na podstawie mojego kodu.

Wystarczyło tylko usunąć w CSS:

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

...ten padding, bo on powodował, że ta animacja nie uruchamiała sie tylko na szerokości tekstu, a niestety była zbyt szeroka.

Zamiast tego paddingu dopisałem:

.default-menu-2 li a
{
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
}

...i teraz jest dobrze.