526互联

styled-components & CSS pseudo classes All In One

发布时间 2023-10-05 23:33:18作者: xgqfrms

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

image

https://stackoverflow.com/questions/77238243/after-element-not-working-in-my-react-component-react-3d-portfolio-project/77238418#77238418

(? 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://stackoverflow.com/questions/45871439/before-and-after-pseudo-classes-used-with-styled-components

https://stackoverflow.com/questions/46339034/how-to-render-pseudo-before-content-dynamically-in-styled-component/

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ?️，侵权必究⚠️！