Multicolor bar above form legend
Unless your elements serve a legitimate purpose (ie. they have content), then you should avoid using empty elements whenever possible.  Instead, I recommend using a linear-gradient as a background on a content element.

Sass makes this easy to generate:

$colors: #C3E279, #F7FEC8, #FFD069, #F27669, #DC9CBE, #C59AE0, #969DCC;
$stops: ();
$current-stop: 0%;
@each $c in $colors {
    $stops: append($stops, $c $current-stop, comma);
    $current-stop: $current-stop + (100% / length($colors));
    $stops: append($stops, $c $current-stop);
}

body:before { /* or some other element*/
  content: '';
  height: 5px;
  display: block;
  background: linear-gradient(to right, $stops);
}


Output:

body:before {
  content: '';
  height: 5px;
  display: block;
  background: linear-gradient(to right, #C3E279 0%, #C3E279 14.28571%, #F7FEC8 14.28571%, #F7FEC8 28.57143%, #FFD069 28.57143%, #FFD069 42.85714%, #F27669 42.85714%, #F27669 57.14286%, #DC9CBE 57.14286%, #DC9CBE 71.42857%, #C59AE0 71.42857%, #C59AE0 85.71429%, #969DCC 85.71429%, #969DCC 100.0%);
}


http://sassmeister.com/gist/9665cd09dfab6b3e05e0