patternhtmlMinor

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

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

iconsthecsstextnavigationaligningmenufooterforand

Problem

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


    

      
        HOME»
      

      
        FEATURES»
      

      
        VIDEOS»
      

      
        CASES»
      

      
        TESTIMONIALS»
      

      
        BLOG»
      

      
        AUTHORIZED BRUXZIR LABS»

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; }
}

Solution

HTML:

Since the the navigation is the only thing inside your `, 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

Code Snippets

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

Context

StackExchange Code Review Q#29882, answer score: 6

Revisions (0)

No revisions yet.