css 伪元素 步骤节点 使用

主要是 使用before 固定虚线。
需要根据具体业务场景修改。

import React from 'react';

const Test = () => (
  <div
    style={{
      maxWidth: '750px',
      margin: 'auto',
      background: 'pink',
    }}>
    <p>测试</p>
    <style jsx>
      {`
        .pro-item {
          background: grey;
          position: relative;
          display: flex;
          flex-direction: column;
          padding: 0 0 0 35px;
        }
        .pro-item::before {
          position: absolute;
          content: '';
          left: 12px;
          top: 0;
          width: 1px;
          height: 100%;
          border-left: 1px dashed #ddd;
          z-index: 1;
        }
        .pro-content {
          display: flex;
          flex-direction: column;
          background: #f6f8f9;
          border-radius: 4px;
          margin-top: 10px;
          padding: 12px 16px;
          position: relative;
        }
        .pro-content::before {
          position: absolute;
          content: '';
          left: -28px;
          top: 50%;
          width: 8px;
          height: 8px;
          background: #fff;
          border: 2px solid #d8d8d8;
          border-radius: 100%;
          margin-top: -4px;
          z-index: 1;
        }
      `}
    </style>
    {[1, 2, 3, 4].map((item, idx) => (
      <div key={idx} className="pro-item">
        <div className="pro-content">
          <p>内容</p>
        </div>
        <div className="pro-content">
          <p>内容</p>
        </div>
      </div>
    ))}
  </div>
);
Test.getInitialProps = async ({ query, inApp }) => ({
  query,
  inApp,
});
export default Test;