Einzelnen Beitrag anzeigen
  #5 (permalink)  
Alt 03.05.2021, 20:28
Traginho Traginho ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.04.2021
Beiträge: 3
Traginho befindet sich auf einem aufstrebenden Ast
Daumen hoch

Zitat:
Zitat von top Beitrag anzeigen
Dein animierter Balken wird mit "::after" vom Link im letzten Listenelement erzeugt. Bist du auf der letzten Seite, hast du dort nur noch ein "strong" und kein "a".

Wenn du dort dein "a" durch "> *" ersetzt, funktioniert es wieder:

Code:
#navigation #navigationsmodul ul li:last-child > *::after {
	content:"";
	position:absolute;
	right:inherit;
	bottom:-3px;
	width:inherit;
	height:3px;
	pointer-events:none;
		/*transition*/
		-webkit-transition:all .5s ease;
		-moz-transition:all .5s ease;
		-o-transition:all .5s ease;
		transition:all .5s ease;		}

#navigation #navigationsmodul ul li:nth-child(1) ~ li:last-child > * {right:40em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(2):hover ~ li:last-child > * {right:30em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(3):hover ~ li:last-child > * {right:20em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(4):hover ~ li:last-child > * {right:10em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(5):last-child:hover > *	{right:0;width:10em;}

#navigation #navigationsmodul ul li:hover ~ li:last-child > *::after,
#navigation #navigationsmodul ul li:last-child:hover > *::after	{background:#c351fa;}
Fantastisch! Ganz herzlichen Dank Dir!!
Mit Zitat antworten