Подчеркивание пункта меню

Чтобы было понятно какой пункт меню активен его надо как-то выделить среди остальных, проще всего оставить подчеркнутым или выделить как-то по другому

CSS
.active {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
}

Надо добавить класс menu для <ul> меню
Скрипт пробегает все пункты меню с классом menu и устанавливает класс active на пункт меню если ссылка соответствует текущей странице
https://cruelten.ru/aktivnyj_punkt_menyu/

jQuery(function($) {
$(function () {  
	$('.menu a').each(function () { 
			var location = window.location.href; 
			var link = this.href;  
			if(location == link) { 
					$(this).addClass('active');
			}
	});

});

});

Для штатного меню WordPress все гораздо проще – WP уже все сделал сам, движок добавляет активному пункту меню класс current-menu-item, соответственно можно обойтись без скриптов вообще

CSS
.current-menu-item {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
}

Чтобы не мучаться с before:: after:: можно использовать дополнительные возможности text-decoration
text-decoration
text-decoration-line
text-decoration-style
text-decoration-color
text-decoration-thickness
text-decoration-skip-ink