css - teclado - inspect element chrome

¿Cómo agrego/inserto un pseudo elemento antes o después en el Inspector de Chrome?

Question

Puedo agregar una regla de estilo regular mediante el signo + (Regla de nuevo estilo) pero no puedo agregar una en las secciones "Pseudo :: antes del elemento" o "Pseudo :: después del elemento" del Inspector de estilo. Si trato de agregar el elemento ::before o ::after en el HTML a través de "Editar como HTML", aparece como texto. Mi solución es agregar <span class="pseudo_before"></span> y luego <span class="pseudo_before"></span> estilo. ¿Me estoy perdiendo de algo?

Answer 1

Abra la hoja de estilo que desee en el inspector presionando Ctrl y haciendo clic en una propiedad de estilo de esa hoja de estilo (en Windows, haga clic aquí para Mac ). Luego puedes agregar lo que quieras y se actualiza en tiempo real.

Por ejemplo:

p::before {
    content:''TEST'';
}

Esto agregará la palabra ''PRUEBA'' como un prefijo a cualquier etiqueta <p> que encuentre. Compruébalo en MDN

Incluso puede guardar la hoja de estilo para que no tenga que hacerlo dos veces. Haga clic derecho dentro de la hoja de estilo y presione ''Guardar como''.

Answer 2

Esta es la forma más fácil y la forma en que lo hago:

1. Inspeccione el elemento al que desea agregar :: before o :: after haciendo clic derecho y yendo a "Inspeccionar Elemento".

2. Ahora, en Developer Tools Console, haga clic en el ícono del signo más alias. "Nueva regla de estilo". Vea la imagen a continuación, el signo más está al lado del botón "Cambiar estado de elemento".

3. A continuación, podrá editar el selector para agregar :: before / :: a él:

4. Ahora edita el contenido a lo que quieras, es decir,

Al igual que:

.grp-row::before {       
   content: ''> ''; 
}

Eso es todo al respecto :)