Review of my CSS for aligning the navigation icons and text in a footer menu

Question

The navigation in my footer menu looks like this

It works, but I get a feeling that using spans the way I did was a bit of a hack. So I would also like to know how to maximize compatibility as used media queries.

I created it using the following

HTML

<div class="footer">
    <ul>

      <li><a href="http://www.bruxzir.com">
        <span>HOME</span><span>&raquo;</span>
      </a></li>

      <li><a href="http://www.bruxzir.com/features-bruxzir-zirconia-dental-crown/">
        <span>FEATURES</span><span>&raquo;</span>
      </a></li>

      <li><a href="http://www.bruxzir.com/video-bruxzir-zirconia-dental-crown/index.aspx">
        <span>VIDEOS</span><span>&raquo;</span>
      </a></li>

      <li><a href="http://www.bruxzir.com/cases-bruxzir-zirconia-dental-crown/">
        <span>CASES</span><span>&raquo;</span>
      </a></li>

      <li><a href="http://www.bruxzir.com/testimonials-bruxzir-zirconia-dental-crown/">
        <span>TESTIMONIALS</span><span>&raquo;</span>
      </a></li>

      <li><a href="/">
        <span>BLOG</span><span>&raquo;</span>
      </a></li>

      <li><a href="http://www.bruxzir.com/authorized-bruxzir-labs-zirconia-dental-crown/">
        <span>AUTHORIZED BRUXZIR LABS</span><span>&raquo;</span>
      </a></li>

    </ul>
</div>

CSS

.footer {
  background-color: #111; 
  text-align: center;
  width: 100%;
  min-height: 120px;
  padding: 24px 0; 
}

.footer a { 
  color: #fff;
  text-decoration: none; 
}

.footer ul { list-style: none; }

@media only screen and (min-width: 1px) and (max-width: 479px) { 
  .footer { text-align: left; }
  .footer ul li { 
    display: block; 
    padding: 12px; 
  }
  .footer ul li a { } 
  .footer ul li a span:nth-of-type(2) {
    padding:9px;
    background-color: rgb(202, 0,0 );
    float: right;
    border-radius:2px;
  }
}  

@media only screen and (min-width: 480px) { 
  .footer { text-align: center; }
  .footer ul li { display: inline; }
  .footer ul li:not(:last-of-type) { margin-right: 12px }
  .footer ul li a span:nth-of-type(2) { display: none; }
}

Answer 1

you should use a <div> where you need to separate a block of code from the rest, for positioning or for other purposes, your use of the div for the Footer section is correct, so that you can place this part of the page at the bottom, where it belongs.

when you create a list item (<li>) it is already a text element. you can perform CSS on these elements the same as you would a <p> Paragraph tag if you add a <p> tag inside the list item it may give you unwanted results like a carriage return after the element.

I think that using the <span> tag the way you did is just fine. I would have probably added a class to each of them, it would have been easier to pick them out with the CSS. other than that your <span> tags were used properly in this instance because they were used inline

Answer 2

HTML:

• Since the the navigation is the only thing inside your <div class="footer">, how about moving the class to the ul?
• Instead of using span's there, you can add the » to a pseudo-element (see the CSS part)

CSS:

• For your arrows, you should use pseudo-elements:

  .footer a:after {
      content: "\00BB";
      float: right;
      padding: 9px;
      border-radius: 2px;
      background-color: #ca0000; /* hex-based values are shorter */
  }
  

  You won't need to hide them on bigger screens either, if you define them inside a media query, because they're not present in your markup

• Instead of actually writing the links in capital letters, write them like you would in normal language and make them appear uppercase with text-transform: uppercase;

• I don't see a purpose for the min-width: 1px part in your media query. Just unnecessary.
• Defining display: block; on list-items is not necessary, because they behave like block-level elements already
• Select .footer li instead of .footer ul li and .footer a instead of .footer ul li a. No need for this extra layer of specificity and dependency. There will probably no other links and list-items in this ul other than these you already have