此设计的标记和CSS样式构思

Question

我正在创建一个投资组合页面，我非常喜欢这个设计，但我不确定如何使用标记，更具体地说是每个工作条目前面的蓝色列表点的CSS样式。

编辑：我遇到麻烦的部分是出现在每个工作条目前面的“蓝点”。我把蓝线作为边界左边的ul，然后我认为我可以把李列表式的子弹作为点，但我还没能完成。

    #work {
      margin: 40px;
    }
    
    #work .job p:first-child {
      font-weight: bold;
    }
    
    #work ul {
      margin-left: 10px;
      border-left: 3px solid #08a1db;
    }
    
    .past-experience {
      display: flex;
      flex-direction: column;
    }

      <section id="work">
        <h4>Work</h4>
        <ul class="past-experience">
          <li class="job">
            <div class="visual-separator"></div>
            <p>Web Development Consulting/Studies</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
          </li>
          <li class="job">
            <div class="visual-separator"></div>
            <p>Web Development Consulting/Studies</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
          </li>
          <li class="job">
            <div class="visual-separator"></div>
            <p>Web Development Consulting/Studies</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
          </li>
        </ul>
      </section>

Answer 1

调整填充和边距，然后使用::before和::after伪元素制作圈子。

#work {
  margin: 40px;
}

#work .job p:first-of-type {
  font-weight: bold;
  margin: 0 0 .5em;
  line-height: 1;
}

.job p {
  margin: 0 0 1.5em;
  line-height: 1.4;
}

.job p:last-child {
  border-bottom: 1px solid grey;
  padding-bottom: 1.5em;
  margin: 0;
}

#work ul {
  padding: 0;
  margin-left: 15px;
}

.past-experience {
  display: flex;
  flex-direction: column;
}

.job {
  list-style: none;
  position: relative;
  border-left: 3px solid #08a1db;
  padding: 0 0 0 25px;
}

.job:not(:last-child) {
    padding-bottom: 25px;
}

.job::after {
  width: 10px; height: 10px;
  transform: translate(calc(-50% - 1.5px),100%)
}

.job::before {
  width: 30px; height: 30px;
  opacity: .5;
  transform: translate(calc(-50% - 2px),0);
}

.job::before, .job::after {
  content: '';
  position: absolute;
  top: -10px; left: 0;
  border-radius: 50%;
  background: #08a1db;
  
}

<section id="work">
    <h4>Work</h4>
    <ul class="past-experience">
      <li class="job">
        <div class="visual-separator"></div>
        <p>Web Development Consulting/Studies</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
      </li>
      <li class="job">
        <div class="visual-separator"></div>
        <p>Web Development Consulting/Studies</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
      </li>
      <li class="job">
        <div class="visual-separator"></div>
        <p>Web Development Consulting/Studies</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure </p>
      </li>
    </ul>
  </section>