如何在两个部分之间创建直线

Question

我正在尝试创建一个包含两个部分的布局，一个在另一个之上，用一条线将它们分开。 我想使用 HTML 和 CSS 来创建此布局，但我不确定如何使用 go。

我曾尝试使用显示网格来创建线条，但它似乎没有按预期工作。 我也尝试过在部分上使用 `border` 属性，但这似乎也不起作用。 谁能提供有关如何使用 HTML 和 CSS 创建此布局的指导？ 我将不胜感激任何帮助或例子。

这是我的代码和结果

  .qualification__section{
    display: grid;
    grid-template-columns: 0.5fr;
    justify-content: center;

    
  }
  .qualification__content{
    display: none;
  }
  .qualification__content-active{
    display: block;
  }

  
.qualification__data{
      display: grid;
      grid-template-columns: 1fr max-content 1fr;
      column-gap: 1.5rem;

      
    }

    .qualification__title{
      font-size: 1rem ;
      font-weight:500 ;
    }
    .qualification__subtitle{
      display: inline-block;
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }
    .qualification__calender{
      font-size: 0.875rem;
    }
    .qualification__rounder{
      display: inline-block;
      width: 13px;
      height: 13px;
      background-color: var(--title-color);
      border-radius: 50%;
    }
    .qualification__line{
      display: block;
      width: 1px;
      height: 100%;
      background-color: #2a2626;
      transform:translate(6px,-7px) ;
    }

这是我想创建的结果

Answer 1

这称为时间线，Inte.net 上有很多示例：

• https://www.w3schools.com/howto/howto_css_timeline.asp
• https://freefrontend.com/css-timelines/

但一般来说，当你想在 CSS 中创建一条分隔线时，你需要：

1. 给出position: relative对于时间轴的父元素。
2. 用伪元素制作分隔线

分隔线的示例：

.timeline {
    position: relative;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}