如何制作边框 "line connected with a dot" 并用伪元素重复？

Question

.wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 163px;
  left: 120px;
  height: 240px;
}

.wrapper:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 0;
  bottom: 0;
  border: solid #00B1F1;
  border-width: 0 0 0 4px;
}
h3 {
  margin: 0px;

}

.circle {
  background-color: #c1c1c1;
  border: 2px solid #c1c1c1;
  height: 20px;
  border-radius: 50%;
  width: 20px;
  position: relative;
  z-index: 2;
  margin-bottom: 8%;
  box-shadow: 0 0 0 10px #Ffffff;
  /* color of background */
}

.aboutContainer {
  display: flex;
  flex-direction: row;
}

.education {
  display: flex;
  flex-flow: row wrap;
  width: 80%;
}

h2 {
  width: 100%;
  height: 10%;
  margin: 69px 0 38px;
  font-size: 1.9rem;
}
h3 {

}
.years {
  width: 20%;
  height: 90%;
  margin-right: 11%;
}

.year {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #00B1F1;
  border-radius: 3px;
  width: 93px;
  height: 33px;
  font-size: 0.87rem;
  color: $color2;
  margin-bottom: 124px;
}

.infoContainer {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 90%;
}

.experiance {
  width: 50%;
  height: 80%;
}

h2 {
  flex-direction: column;
}

p {
  font-size: 14px;
  color: gray;
}


.yearInfo {
  margin-bottom: 70px;
}

<section class="aboutContainer">

      <div class="education">
        <h2>Education</h2>

        <div class="years">
          <div class="year">
            2017 - 2018
          </div>
          <div class="year">
            2018 - 2019
          </div>
        </div>
        <div class="infoContainer">
          <div class="yearInfo">
            <h3>Web Developing Journey</h3>
            <p>Journey starts with The ICT College. First thing we came across was HTML and CSS and our first "Hello World".
              </p>
          </div>
          <div class="yearInfo">
            <h3>Web Developing Journey</h3>
            <p>Journey starts with The ICT College. First thing we came across was HTML and CSS and our first "Hello World".
</p>
          </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>


    </section>

我正在用 PSD 制作我的投资组合网站，我遇到了一个带有 "Long line dot, long line dot" 的左边框。我怎样才能做到？

我试过制作它，当我制作与它非常相似的东西时，它会导致没有响应并且线条的整个高度发生变化并且它从该位置向左移动。

我应该使用伪元素还是使用 border-left？或者我应该改用图像吗？我好几天都想不通了。有人可以向我解释该怎么做吗？提前谢谢你。

它应该是这样的，高度不会快速变化，甚至会从该位置向左或向右移动。 Border: line dot, line dot

Answer 1

我将该内容视为无序列表。我们可以将 html 写成一个列表，然后对其设置样式，使列表左侧有一个蓝色边框，灰色项目符号重叠。

我们对 css 列表中的要点样式几乎无能为力。幸运的是，我们可以为这些使用图像文件。我没有添加单独的 .png 文件，而是将其编码到 css.

一旦我们将其放置到位，只需相对于项目符号点定位列表中的元素即可。

ul   {margin-left:200px; border-left:5px solid #99f; list-style-position: inside;
     list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAfAgMAAABv3o7tAAAADFBMVEXBw8Dd4N3u8e39//z1rD+PAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+MFAggcCa9VMDYAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAFNJREFUCNdj+A8GBxhIp5+Ggel/Dgz1IPoLA4M0iL7AwMAOohsYGBhBtAMDA8P+Awz/gBRDPRptj0aDxB0gNEwf3JwHUHNh9vxzYKyHuCOKDPcDANOllFiDB55zAAAAAElFTkSuQmCC');}
li   {margin-left:-23px; position:relative; font-family:arial; margin-top:50px; left:-32px;}
time {position: absolute; left:-110px; top:7px;}
h3   {margin-top:-30px; padding-left:50px;}
p    {padding-left:50px;}

<ul>
  <li>    
    <h3>Master of Engineering</h3>
    <time>2017 - 2018</time>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </li>
  <li>
      <h3>Sed ut perspiciatis</h3>
      <time>2016 - 2017</time>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </li>
  <li>
      <h3>Nemo enim ipsam voluptatem</h3>
      <time>2015 - 2016</time>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </li>
</ul>

这为我们提供了简洁、语义化的 HTML 和响应式布局。

如何制作边框 "line connected with a dot" 并用伪元素重复？

How to make border "line connected with a dot" and repeat with pseudo elements?

html

css

pseudo-element