Como usar esto
li+li:before { padding: 8px; color: black; content: "/\00a0"; }en componente con estilo? Traté de convertir esto https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_breadcrumbs
al componente con estilo pero no funciona.
https://codesandbox.io/s/recursing-pasteur-mkmyh?file=/src/App.js
El contenido del content parece ser el culpable. El resto del código está bien.
En lugar de /\00a0 debería ser /\\00a0 . Parece ser un problema específico de componentes con estilo.
Aquí hay una breve cita como explicación, la fuente tiene una discusión más profunda.
Básicamente, debido a que escribe CSS en JS, debe escapar dos veces: una para el analizador JS y otra para CSS uno.
Código de trabajo completo:
import styled from "styled-components"; export default function Namaste() { return ( <UL> <li> <a href="/#">Home</a> </li> <li> <a href="/#">Pictures</a> </li> <li> <a href="/#">Summer 15</a> </li> <li>Italy</li> </UL> ); } const UL = styled.ul` padding: 10px 16px; list-style: none; background-color: #eee; li { display: inline; font-size: 18px; color: red; } li + li:before { padding: 8px; color: black; content: "/\\00a0"; } li a { color: #0275d8; text-decoration: none; } `;