should - ¿Está bien usar múltiples pseudo-elementos en css?

pseudo elementos css

Question

Quiero hacer un menú donde cada elemento se separa con un ·. Para lograrlo utilizo

menu li:before {
    content: "· ";
}

Esto es hinchado, pero también genera un punto antes del primer elemento. Por lo tanto, me gustaría usar :first-child también. ¿Puedo hacer esto?

Answer 1

Aquí está el violín de trabajo: http://jsfiddle.net/surendraVsingh/zRrLF/

<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>

</ul>​

CSS:

li:before{content:''. '';}
li:first-child:before{content:''@ '';}

Answer 2

Claro que puedes - http://jsfiddle.net/WQBxk/

p:before {
    content: "BEFORE ";
    display: block;
}

p:first-child:before {
    content: "1ST";
    display: block
}
​

Lo malo - no funcionará en IE7 y por debajo. No debido a los pseudo selectores múltiples, sino debido a que no es compatible :before - http://kimblim.dk/css-tests/selectors/

Sólo probado en IE8 - funciona bien.

Answer 3

Por supuesto, puede usar pseudo clases. Son compatibles con IE8 y superiores. Puede verificar la compatibilidad de cualquier pseudoclase que vaya a usar aquí http://caniuse.com/#search=after

Si no quiere un punto, solo use comas vacías en el contenido y luego muestre: bloquear y también especifique altura y ancho.

menu li:before {
    content: "";

    display:block;
    width:50px;
    height:50px;
    background:red;

}