How to use this
li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
in styled-component? I tried to convert this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_breadcrumbs
to styled-component but it's not working.
https://codesandbox.io/s/recursing-pasteur-mkmyh?file=/src/App.js
The content of the content seems to be the culprit. The rest of the code is fine.
Instead of /\00a0 it should be /\\00a0. It seems to be a styled-components specific issue.
Here's a short quote as an explanation, the source has more in depth discussion.
Basically because you write CSS in JS you have to escape twice - once for JS parser and once for CSS one.
Full working code:
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;
}
`;