CSS KP 05— Nav hover over indicator, <ul><li><a> or <button> with aria

without any styling

            <section class="flow" id="interactive-elements">
                <h2 class="numbered-title"><span>03</span> Interactive elements</h2>
                
                <!-- navigation -->
                <div>
                    <nav>
                        <ul>
                            <li><a>Active</a></li>
                            <li><a>Hovered</a></li>
                            <li><a>Idle</a></li>
                        </ul>
                    </nav>
                </div>

utility class styling: upper case, text-white, letter-spacing, flex on the parent element

By utilizing the utility classes we built in our previous blog, we can directly go to our HTML and add styling.

            <section class="flow" id="interactive-elements">
                <h2 class="numbered-title"><span>03</span> Interactive elements</h2>
                
                <!-- navigation -->
                <div>
                    <nav>
                        <ul class="primary-navigation flex" style="--gap: 4rem;">
                            <li><a class="uppercase text-white letter-spacing-2" href="#">Active</a>
                            <li><a class="uppercase text-white letter-spacing-2" href="#">Hovered</a>
                            <li><a class="uppercase text-white letter-spacing-2" href="#">Idle</a>
                        </ul>
                    </nav>
                </div>

`list-style-type: none` and `text-decoration: none` to remove the underline and anchor dot

add custom css

.primary-navigation {
    --gap: 8rem;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.primary-navigation a {
    text-decoration: none;
}

add span number and style

add span for the number

//html
<ul class="primary-navigation flex">
      <li><a class="uppercase text-white letter-spacing-2" href="#"><span>1</span>Active</a>
      <li><a class="uppercase text-white letter-spacing-2" href="#"><span>2</span>Hovered</a>
      <li><a class="uppercase text-white letter-spacing-2" href="#"><span>3</span>Idle</a>
</ul>

css

//css
.primary-navigation a > span {
    font-weight: 700;
    margin-right: .5rem;
}

add underline-indicators custom component css. and add “active” class to li.

//html
<ul class="primary-navigation underline-indicators flex">
        <li class="active"><a class="uppercase text-white letter-spacing-2" href="#"><span>1</span>Active</a>

testing before hover: add padding and border-bottom for all

.primary-navigation { //parent element 
    ...
    --underline-gap: 2rem;
    ...
}


.underline-indicators  > * { //all child elements
    padding: var(--underline-gap, 1rem) 0;    //default
    border-bottom: .3rem solid hsl( var(--clr-white)  ); 
}

border-bottom color / 0 to hide them all

Now hide them all

//css
.underline-indicators  > * { 
    ...
    border-bottom: .3rem solid hsl( var(--clr-white)  / 0 );  // <--add 
                                                             // `/0` to hide
}

copy and paste that border-bottom, turn it into border-color and add / .25 to reduce the alpha level

then add the hover affect

//css

.underline-indicators  > *:hover {
    border-color: hsl( var(--clr-white) / .25); //25% opacity
}

Utilize that active class

.underline-indicators  > *:hover {
    border-color: hsl( var(--clr-white) / .25); //25% opacity
}

.underline-indicators  > .active {
    border-color: hsl( var(--clr-white) / 1 ); //100% opacity
}

How to re-utilize a lot of code we’ve wrote with the buttons?

<div style="margin-bottom: 50vh">
    <!-- Tabs -->
    <div class="tap-navigation flex">
       <div>
         <button class = "active uppercase .ff-sans-cond text-white bg-dark letter-spacing-1">Moon</button>
         <button class = "uppercase .ff-sans-cond text-white bg-dark letter-spacing-1">Mars</button>
         <button class = "uppercase .ff-sans-cond text-white bg-dark letter-spacing-1">Europa</button>
       </div>
    </div>

1. add all the utility class css we’ve wrote
2. add “underline-indicators” to the parent div

//html
<div class="tap-navigation flex">
       <div class = "underline-indicators" > ///<-------- add 
         <button.....

remove the border but keep the border-bottom

.underline-indicators > * {
    padding: var(--underline-gap, 1rem) 0;
    border: 0; // <---- just add 0 
    border-bottom: .2rem solid hsl( var(--clr-white) / 0 );
}

Accessibility, Accessible Rich Internet Applications ARIA

Accessible Rich Internet Application provides additional semantic information for the assistive technologies such as screen readers, to better understand .

.underline-indicators > [aria-selected="true"]