Before and After pseudo classes used with styled-components
Before and After pseudo classes used with styled-components
What is the proper way to apply :before and :after pseudo classes to styled components? I know that you can use &:hover {} to apply the :hover pseudo class to a styled-component. Does thi...
stackoverflow.com
How to Create a Responsive Square with CSS
How to Create a Responsive Square with CSS
I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size.
spin.atomicobject.com
const ImgWrapper = styled.div`
& {
width: 100%;
position: relative;
}
&:after {
content: '';
display: block;
padding-bottom: 100%;
}
> * {
position: absolute;
}
`;
styled-component에서 반응형 정사각형을 만드는 코드이다.
padding-bottom을 100%로 주면 width만큼 된다는데... 잘 이해가 안가지만 동작은 잘한다.