Adding different colours to nav elements

Question

I'm looking to add different background colours to each of the Option's on my secondary nav. I've tried a few things but it just bloats up the code beyond belief. There has to be an easier way. Thanks in advance.

http://codepen.io/Compton/pen/hlrId

<div class="container">
            <section> <!--class="color-4"-->
                <nav class="cl-effect-2">
                    <a href="#"><span data-hover="Option 1">Option 1</span></a>
                    <a href="#"><span data-hover="Option 2">Option 2</span></a>
                    <a href="#"><span data-hover="Option 3">Option 3</span></a>
                    <a href="#"><span data-hover="Option 4">Option 4</span></a>
                    <a href="#"><span data-hover="Option 5">Option 5</span></a>
                    <a href="#"><span data-hover="Option 6">Option 6</span></a>
                </nav>
            </section>
        </div><!-- /container -->

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    width:100%;
    float:left;
    margin: 100px 0 0 0 !important;
}
/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

.cl-effect-2 a span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background: #231f20;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.csstransforms3d .cl-effect-2 a span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
    background: #231f20;    
}

nav a {
    position: relative;
    display: inline-block;
    margin: 15px 78px;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}

nav a:hover,
nav a:focus {
    outline: none;
}

Answer 1

Something like this for each one of those options

[data-hover="Option 1"],
[data-hover="Option 1"]::before
{
  background-color:red!important;
}

Obviously, if you're more specific with your selectors, you can do away with !important but this should give you an idea.

---

Update:

I see what you meant now.

Try this then

.cl-effect-2 a span[data-hover="Option 1"],
.csstransforms3d .cl-effect-2 a:hover span[data-hover="Option 1"]::before,
.csstransforms3d .cl-effect-2 a:focus span[data-hover="Option 1"]::before
{
  background-color:#c00;
}

What happened before was caused by the !important declaration from before which overrode the transition colour

And if you want to change the transition colour too. Just add this before the last rule. DEMO

.csstransforms3d .cl-effect-2 a span[data-hover="Option 1"]::before
{
  background-color:orange;
}

Answer 2

Do you want to color all the span with a same color?

Edit the CSS:

/* Front Side */
.cl-effect-2 a span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background-color: your_color; /* Edited CSS */
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Bottom Side */
.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
    background-color:your_color; /* Edited CSS */   
}

UPDATE: For different spans with different colors, please use classes, add the classes to the spans, like red, green or blue.

HTML:

<div class="container">
<section> <!--class="color-4"-->
<nav class="cl-effect-2">
<a href="#"><span class="red" data-hover="Option 1">Option 1</span></a>
<a href="#"><span class="blue" data-hover="Option 2">Option 2</span></a>
<a href="#"><span class="green" data-hover="Option 3">Option 3</span></a>
<a href="#"><span  class="red" data-hover="Option 4">Option 4</span></a>
<a href="#"><span class="green" data-hover="Option 5">Option 5</span></a>
<a href="#"><span class="blue" data-hover="Option 6">Option 6</span></a>
</nav>
</section>
</div><!-- /container -->

CSS:

.red{background-color:red !important;}
.green{background-color:green !important;}
.blue{background-color:blue !important;}

/* !important is needed to override the previous CSS.*/

.cl-effect-2 a span.red::before,
.cl-effect-2 a:hover span.red::before,
.cl-effect-2 a:focus span.red::before {
    background-color: red;  
}
.cl-effect-2 a span.green::before,
.cl-effect-2 a:hover span.green::before,
.cl-effect-2 a:focus span.green::before {
    background-color: green;    
}
.cl-effect-2 a span.blue::before,
.cl-effect-2 a:hover span.blue::before,
.cl-effect-2 a:focus span.blue::before {
    background-color: blue; 
}

Edited CodePen.