Skip to content

Instantly share code, notes, and snippets.

@marklearst

marklearst/nav-last-item-has-slash.css

Created January 12, 2019 10:08
Show Gist options
  • Save marklearst/d32888bfe508b0aa4f9b1e0fe68beeb1 to your computer and use it in GitHub Desktop.
Save marklearst/d32888bfe508b0aa4f9b1e0fe68beeb1 to your computer and use it in GitHub Desktop.
Download ZIP
Adding slash to last nav item in Advanced Reacts sick-fits, @media to handle 1300px+ so no funky vertical scroll issues.
Raw
nav-last-item-has-slash.css
&::before,
&:last-child span::before {
content: '';
width: 2px;
background: ${props => props.theme.lightgrey};
height: 100%;
left: 0;
position: absolute;
transform: skew(-20deg);
top: 0;
bottom: 0;
}
&:last-child span::before {
left: 100%;
@media (min-width: 1300px) {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment