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://stackoverflow.com/questions/77238243/after-element-not-working-in-my-react-component-react-3d-portfolio-project/77238418#77238418

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-2025

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

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

---