1. CSS ::first-letter
The first option is selector CSS ::first-letter
.
li.menu-item.active a::first-letter {
color: red;
}
The a
tag inside menu should have display: block
/ display: inline-block
.
Note: The ::first-letter selector can only be used with block-level elements.
2. Filter nav_menu_item_title
Another way is to use nav_menu_item_title
filter and surround the first letter with an tag with CSS class.
add_filter( 'nav_menu_item_title', 'se337090_first_letter', 30, 4 );
function se337090_first_letter( $title, $item, $args, $depth )
{
if ( $item->current )
{
//
// after application of this filter, there is the concatenation:
// $item_output .= $args->link_before . $title . $args->link_after;
$first_letter = substr( $title, 0, 1);
$title = substr($title, 1);
$args->link_before .= sprintf( '<span class="menu-item-first-letter">%s</span>', $first_letter );
// but you can also add changes to the title:
// $title_end = substr($title, 1);
// $title = sprintf( '<span class="menu-item-first-letter">%s</span>%s', $first_letter, $title_end )
}
return $title;
}