Two different horizontal hr/separator in CSS

Question

The CSS code of a separator is like this:

hr.separator {
    border: 0;height: 2px;background: #000;
    background-image: -webkit-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -moz-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -ms-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -o-lineargradient(left, #AA0000, #000, #AA0000);
    width: 45%;
}

Where this is the markup:

<hr class="separator" />

I want to add another "hr" with different color. (left, #fff, #000, #fff).

Answer 1

You can do it like this:

hr.separator {
    border: 0;height: 2px;background: #000;
    width: 45%;
}
hr.separator.red{
    background-image: -webkit-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -moz-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -ms-linear-gradient(left, #AA0000, #000, #AA0000);
    background-image: -o-lineargradient(left, #AA0000, #000, #AA0000);  
}
hr.separator.blue{
    background-image: -webkit-linear-gradient(left, #0000AA, #000, #0000AA);
    background-image: -moz-linear-gradient(left, #0000AA, #000, #0000AA);
    background-image: -ms-linear-gradient(left, #0000AA, #000, #0000AA);
    background-image: -o-lineargradient(left, #0000AA, #000, #0000AA);  
}

<hr class="separator red" />
<hr class="separator blue" />