Expanding Underline from Center: Five Approaches
On several websites I noticed an interesting animation that was triggered when a menu item was hovered over. An underline expanded from the center of the element being hovered until it extended the full width of the element. Below I have demonstrated five different ways this effect can be accomplished. Hover over the black text below to trigger the effect. The rotate, scale, and keyframe methods all use pseudo-elements to draw the line. The jQuery and "transition on width" methods draw the line with a child or sibling element that has a background color and is absolutely positioned. The simplest method is probably the first listed.