How to change first letter of active menu item

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;
}