Use :after/:before or use span tags?

This is the expected results : , what’s the “best to use” in regards of readability, screen readers, page loading etc…

I would use after tags rotated by a degree with a width of 2-3 px. It just seems simpler to manage than using a separate HTML element.

My immediate response to your question was, "Use :after", but I did some digging. It turns out, depending on the combination of screen reader and browser being used, the user may actually have that slash read to them, even if it’s generated in CSS. While font libraries like Font Awesome use character codes that screen readers won’t even try, something as common as a slash would probably get picked up. This is a bummer, since the :after pseudo element was the easiest solution. To make your page more compatible with assistive tech, I would suggest having the slash in the markup, and wrapping each one with a span that explicitly hides the character.

<nav>
  <ul>
    <li><a href="#">Home</a><span aria-hidden="true">/</span></li>
    <li><a href="#">About</a><span aria-hidden="true">/</span></li>
    <li><a href="#">Portfolio</a><span aria-hidden="true">/</span></li>
    <li><a href="#">Clients</a><span aria-hidden="true">/</span></li>
    <li><a href="#">Contact</a><span aria-hidden="true">/</span></li>
  </ul>
</nav>
2 Likes

If not having the after tag read to you is the goal, can’t they use something like :

&:after {
  content:'';
  display:block;
  position: absolute;
  left:100%;
  top: 0;
  transform: rotate (10deg);
  width: 10px;
  height:100%;
  background: yellow;
}

I’m on mobile but I might make a Fiddle for this later. Its a pure CSS element and wont be interpreted as a slash. Plus with auto prefixer it should work for almost any relevant browser.

1 Like

Yeah, I think that’s a great idea, though it should probably use inline-block.

1 Like

What’s the difference between using inline-block and block in this instance?

I’m not really sure about what inline-block does apart from fitting to the content size (which is the only time I use it). Since there is no content and the height and width are fixed, is there a difference between using block or inline-block?

The screenshot I uploaded was actually the result of: a::after{ content: "/"; color: green; margin-left: 1rem;

( and i used a::after instead of a:after because it’s the new css3 synthax and to note the difference between pseudo elements and pseudo classed.

Block level elements cannot have anything on either side of them, and force the following element to a new line. Also, a height of 100% will make the content fill the entire containing element. It’s hard to see in the screenshot, but the yellow bar to the right is what happens.

Here’s my code based on your idea.

1 Like

Thanks, I understood what you’re trying to do, but it’s just too much code for a simple result, so I think I’ll be using the a::after{ content: “/”; } unless (for some reason) I’ll have to use spans. These seem to be the preferable options for now.Thanks again for your help.