aplicar css a .after con jquery

[oscarbt]

Hola a todos, estoy usando .after para validar mis campos y lo hago de la siguiente manera:

Código Javascript:

if ($("#"+id_camp[i]).val() == "") {  
 
 $("#"+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>"); 
}
 

De esta manera ejecuto la accion en un un ciclo para validar cada uno de los campos de mi formulario, pero resulta que el css lo estoy aplicando en el mismo span y ahi un parte de css que no se como aplica

Este es el css:

Código CSS:

.error{
    background-color: #BC1010;
    border-radius: 4px 4px 4px 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: 6px;
    padding: 6px 12px;
    position: absolute;
}
.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;
}
 

La parte que no se aplicar es la del .error:before

Y me toca aplicarlo en el mismo spam ya que el class y el id del spam es variable, esto con el fin de realizar otras validaciones

Como puedo aplicar este tipo de css que aplica el bofore

Como lo puedo aplicar dentro de esta validacion?...