React+StyledComponents实现div内进度指示器下方居中垂直虚线

实现方案 #

你之前伪元素不生效大概率是缺少必要的定位属性、未设置content属性导致的，按照下面的代码修改即可实现需求：

基础CSS修改代码

.wrapping-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.progress-indicator {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  border-radius: 50%;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(39, 40, 42);
  color: rgb(255, 255, 255);
  font-size: 13px;
  text-align: center;
  /* 新增：为伪元素提供定位参照 */
  position: relative;
  z-index: 1;
}

/* 新增虚线伪元素 */
.progress-indicator::after {
  content: "";
  position: absolute;
  /* 水平居中对齐圆点 */
  left: 50%;
  transform: translateX(-50%);
  /* 从圆点底部开始延伸 */
  top: 100%;
  width: 1px;
  /* 高度和容器的margin-bottom一致，刚好连接到下一个圆点 */
  height: 20px;
  border-left: 1px dashed #ccc; /* 可自行调整虚线颜色 */
}

/* 隐藏最后一个容器的虚线，避免底部多余线条 */
.wrapping-container:last-of-type .progress-indicator::after {
  display: none;
}

.input {  
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

Styled Components适配写法

对应改成styled组件的写法，还可以通过props动态控制最后一项的虚线显示：

import styled from 'styled-components'

const WrappingContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 20px;
`

const ProgressIndicator = styled.div`
  height: 22px;
  width: 22px;
  margin-right: 16px;
  border-radius: 50%;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(39, 40, 42);
  color: rgb(255, 255, 255);
  font-size: 13px;
  text-align: center;
  position: relative;
  z-index: 1;

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 1px;
    height: 20px;
    border-left: 1px dashed #ccc;
    /* 通过props控制最后一项隐藏虚线 */
    ${props => props.isLast && 'display: none;'}
  }
`

const Input = styled.div`
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
`

// 组件调用示例
function App() {
  return (
    <>
      <WrappingContainer>
        <ProgressIndicator>2</ProgressIndicator>
        <Input>Input</Input>
      </WrappingContainer>
      <WrappingContainer>
        <ProgressIndicator isLast>3</ProgressIndicator>
        <Input>Input</Input>
      </WrappingContainer>
    </>
  )
}

内容的提问来源于stack exchange，提问作者cts