¿Cómo aplico CSS en un span con class e id variable?

[oscarbt]

Hola a todos, estoy usando una validacion en javascript para los campos que son obligatorios, para ellos uso .after:

Código Javascript:

$("#"+id_camp[i]).after("<span id='error"+id_camp[i]+"' class='error"+id_camp[i]+"' style=' background-color: #BC1010; border-radius: 4px 4px 4px 4px;   color: white; font-weight: bold;    margin-left: 16px; margin-top: -2px; padding: 6px 12px; position: absolute;   ' >Campo obligatorio</span>");
 

Como se observa el id y el class es variable por tanto no podria yo aplicar el estilo css en oro archivo e invocarlo a traves del class ni el id, Por tanto lo coloco como style en el spam

Sin embargo requiero aplicar esto:

Código CSS:

.error:before{
    border-color: transparent #BC1010 transparent transparent;
    border-style: solid;
    border-width: 6px 8px;
    content: "";
    display: block;
    height: 0;
    left: -16px;
    position: absolute;
    top: 8px;
    width: 0;
}
 

y ahi es donde tengo el problema, como aplico el before de .error en la etiqueta style ?

Agradezco me den alguna indicación...Muchas gracias

[pzin]

¿Yo me pregunto porqué las clases han de ser únicas?

Puedes perfectamente aplicar varias clases a un mismo elemento:

Código HTML:

<span class="error otraclase otracosa">blabla</span>
 

Y luego poner sus estilos como harías normalmente. Y luego también aplicar el pseudo-elemento.
Yo diría que el problema que tienes es a causa de no hacer esta parte bien.