styled-components & CSS pseudo classes All In One
styled-components & CSS pseudo classes All In One
::after
&::before
CSS 伪元素
const ListItem = styled.li`
font-size: 70px;
font-weight: bold;
cursor: pointer;
color: transparent;
-webkit-text-stroke: 1px white;
position: relative;
&::after {
content: "${(props) => props.text}";
position: absolute;
top: 0;
left: 0;
}
&:hover {
&::after {
color: rebeccapurple;
}
}
`;
demos
import React from 'react'
import styled from 'styled-components'
const data = [
"Web Development",
"Data Science",
"DevOps",
"Low Code Platforms",
"Automation",
];
const Section = styled.div`
height: 100vh;
scroll-snap-align: center;
display: flex;
justify-content: center;
`
const Container = styled.div`
width: 1400px;
display: flex;
justify-content: space-between;
`
const Left = styled.div`
flex: 1;
display: flex;
align-items: center;
`
const List = styled.ul`
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
`
const ListItem = styled.li`
font-size: 70px;
font-weight: bold;
cursor: pointer;
color: transparent;
-webkit-text-stroke: 1px white;
position: relative;
&::after {
content: "${(props) => props.text}";
position: absolute;
top: 0;
left: 0;
}
&:hover {
&::after {
color: rebeccapurple;
}
}
`;
const Right = styled.div`
flex: 1;
`
const Works = () => {
return (
<Section>
<Container>
<Left>
<List>
{data.map(item=>(
<ListItem key={item} text={item}>{item}</ListItem>
))}
</List>
</Left>
<Right></Right>
</Container>
</Section>
)
}
export default Works
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
refs
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/17744108.html
未经授权禁止转载,违者必究!