The Navigational Header: Problem Solving W/ CSS

Overview

I spent sometime this morning working on my portfolio site. Specifically, I worked on my site's navigational bar using a Figma file provided to me as a guide. Here's a look at what the end result is supposed to look like.

It's a relatively simple design. Each item in the navigational bar is separated with "forward slashes", and "on hover" each link is to be underlined. While I was excited about implementing this design, I soon realized that there would be some hurdles that I would need to overcome in order to achieve it.

The Problem Part 1

The first question I had to answer was the following: "How do I create the forward slashes that separate the items in my nav bar?"

Attempt 1

My first idea was to use the <span></span> element in the following way to explicitly denote where I wanted the separators to appear.

<nav class="site-nav">
   <a class="base-voice" href="#">Home</a>
   <span>/</span>
   <a class="base-voice" href="#">Blogging</a>
   <span>/</span>
   <a class="base-voice" href="#">Project</a>
   <span>/</span>
   <a class="base-voice" href="#">Resume</a>    
</nav>

This produced the above result. Clearly, the forward slashes are to small and don't resemble the Figma file very well. My suspicion is that explicitly using the forward slash within the span makes that content subject to the typography settings of the overall project.

Attempt 2

My second attempt involved a bit more research. I found that someone had asked a similar question on Stack Overflow. In response, someone suggested combining CSS's element + element and :pseudo element targeting pattern to give each item or <a></a> element in my navigation bar a forward slash that immediately precedes them via the content property. This makes a lot of sense on two fronts. 1. It gets around the typography style issue I had earlier and 2. Because the forward slashes are purely decorative, it makes sense to keep them tied to the CSS as opposed to giving them semantic weight by placing them in the HTML. Using this approach gave me the result I wanted. See below.

<nav class="site-nav">
   <a class="base-voice" href="#">Home</a>
   <a class="base-voice" href="#">Blogging</a>
   <a class="base-voice" href="#">Project</a>
   <a class="base-voice" href="#">Resume</a>    
</nav>

CSS

.site-nav a+a:before {
  content: "/";
  padding: 0 5px;
}

The Problem Part 2

With the forward slashes out the way, I moved on to begin work on the hover effect. This seemed simple enough. I've used hover effects before, and while I knew text-decoration: underline was a legitimate option, I instead decided to use the border-bottom property because I knew it would enable me to control the distance between the "underline" and the navigational link via the padding-bottom property. However, I ran into a problem when I saw that the underline was actually exceeding the length of the word and including the "forward slash."

.site-nav a+a:before {
  content: "/";
  padding: 0 5px;
}

.site-nav a:hover {
  border-bottom: 5px solid var(--accent);
  cursor: pointer;
}

Attempt 1

The first thing I had to realize is that this wasn't a bug. The browser is doing exactly what I told it to do. The pseudo element that I'm using to create the forward slashes actually lives inside the <a></a>element. So by targeting all the links in my CSS to have an underline on hover, I was also inherently including those forward slashes. But that's not what I want. So I needed to figure out a way to demarcate the the navigational link itself from its preceding forward slash. This is when I decided to return to the <span></span> element. While it wasn't useful for the problem I tried to solve earlier, it was useful for this new problem. By placing <span></span> inside my a tags and changing my hover target to the spans within those a tags, I was able to create the underline effect that I wanted.

<nav class="site-nav">
   <a class="base-voice" href="#"><span>Home</span></a>
   <a class="base-voice" href="#"><span>Blogging</span></a>
   <a class="base-voice" href="#"><span>Project</span></a>
   <a class="base-voice" href="#"><span>Resume</span></a>   
</nav>

.site-nav a+a:before {
  content: "/";
  padding: 0 5px;
}

.site-nav span:hover {
  border-bottom: 5px solid var(--accent);
  cursor: pointer;
}

Conclusion

Underline effects within navigational bars and forward slash separators is one way to create an interesting looking navigational bar. Now that I've solved this problem, I'll have a frame of reference for when I need to solve something similar either in a professional setting or for one of my own projects.

How would you have gone about solving these two issues?