Using aria-current="page" to underline a menu on a static page

[marcosscriven]

I'm using classless pico CSS and wanted the currently selected menu item to have an underline, rather than only when hovering.

I've got Hugo to output aria-current="page" in the generated HTML for the given page, but looking in the browser console it's overridden by https://github.com/picocss/pico/blob/main/css/pico.fluid.classless.jade.css#L2104

nav li :where(a, [role=link]):not(:hover) {
  text-decoration: none;
}

My generated HTML snippet from Hugo is:

<nav>
	<ul>
		<li><strong>Website name</strong></li>
	</ul>
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/menu1/">Menu 1</a></li>
		<li><a href="/menu2/" aria-current="true">Menu 2</a></li>
	</ul>
	</nav>

Am I doing something wrong here?

[marcosscriven]

For now, I've added this to a small override CSS:

nav li a[aria-current="page"] {
      text-decoration: underline;
}