/* source article https://css-tricks.com/creating-an-animated-menu-indicator-with-css-selectors/ */ $nav_items:4; $nav_items_width:(100/$nav_items)*1%; body { background:aliceblue; } .nav_wrap { padding:20px; &:hover { .nav_item:last-child { &:before,&:after { opacity:1; } } } } .nav_list { position: relative; display:flex; align-items:center; background:lightblue; border-radius: 6px; } .nav_item { flex:0 0 auto; line-height: 50px; width:$nav_items_width; text-align: center; &.active_mod { .nav_link { color:white; } } &:last-child { &:before,&:after { content:''; position: absolute; z-index: 0; transition:left .6s ease; opacity:.75; } &:before { top: 0; left: 0; width: $nav_items_width; height: 6px; background: darksalmon; border-radius: 6px; } &:after { border:10px solid transparent; border-top:10px solid darksalmon; top: 0; left:50%; margin-left:-10px; } } } .nav_link { position: relative; z-index: 5; display: block; padding: 10px; border-radius: 4px; color:crimson; text-decoration: none; &:hover { text-decoration: none; color:white; } } @for $i from 1 through $nav_items { .nav_item:nth-child(#{$i}).active_mod ~ .nav_item:last-child:before { left:($nav_items_width*$i) - $nav_items_width; } .nav_item:nth-child(#{$i}).active_mod ~ .nav_item:last-child:after { left:($nav_items_width*$i + $nav_items_width/2) - $nav_items_width; } } .nav_item:last-child.active_mod:before { left:(100% - $nav_items_width) } .nav_item:last-child.active_mod:after { left:(100% - $nav_items_width) } @for $i from 1 through $nav_items { .nav_item:nth-child(#{$i}):hover ~ .nav_item:last-child:before { left:($nav_items_width*$i) - $nav_items_width !important; } .nav_item:nth-child(#{$i}):hover ~ .nav_item:last-child:after { left:($nav_items_width*$i + $nav_items_width/2 ) - $nav_items_width !important; } } .nav_item:last-child:hover:before { left:(100% - $nav_items_width) !important; } .nav_item:last-child:hover:after { left:(100% - $nav_items_width + $nav_items_width/2) !important; }