html - CSS 连接元素符号点

Question

当涉及到网站时，我通常坚持使用后端，但我正在尝试为我的简历网站实现一项功能，我希望通过一条线链接要点。这条线是垂直的，应该在每个元素符号点处断开，以防止线穿过元素符号点 - 它应该停止然后重新开始。

我已经创建了一个版本，但是有一些问题；该行不通过元素符号点，修改行的“左”属性将其放在元素符号点的任一侧。该线仅绘制到固定大小，理想的线可以通过绘制到每个 li 或 span 在任何高度上工作

有谁知道如何允许线条通过元素符号点绘制以及线条大小不固定在 CSS 中而是固定在 HTML 元素上？

如果已经有这个的开发版本，请重定向我，我还没有找到符合要求的。

div#resumeItem {
  padding-left: 2em;
}

/* linked bullets*/

.list-ic a {
  color: #788288;
  text-decoration: none;
}

.list-ic li {
  position: relative;
}

.list-ic li span {
  display: inline-block;
  border-radius: 1em;
  border-color: #18bc9c;
  border-width: 0.6em;
  border-style: double;
  color: white;
  position: absolute;
}

.list-ic li::before {
  content: '';
  position: absolute;
  background: #18bc9c;
  z-index: -1;
}

.list-ic.vertical {
  padding: 0;
  margin: 0;
}

.list-ic.vertical li {
  list-style-type: none;
  text-align: left;
}

.list-ic.vertical li span {}

.list-ic.vertical li::before {
  top: -12.0em;
  left: 1.1em;
  width: 0.2em;
  height: 24em;
}

.list-ic li:first-child::before {
  display: none;
}

.list-ic .active {
  background: dodgerblue;
}

.list-ic .active~li {
  background: lightblue;
}

.list-ic .active~li::before {
  background: lightblue;
}

/* end */

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-9 col-xs-12">
    <h5 id="profile">Work Experience</h5>
    <hr id="profile">
    <div class="col-xs-12" id="profile">
      <!-- Council -->
      <ul class="list-ic vertical">
        <li><span></span></li>
        <div id="resumeItem">
          <h5 id="resume">Test & Test Test</h5>
          <h6 id="resume">Test Test Test - Internship</h6>
          <p id="resume">Test 2018 - Test 2018 (4 Test)</p>
          <p id="resume">Test, Test</p>
          <p id="resume">Reorder elements in a list or grid using the mouse. Examples. Default functionality · Connect lists · Display as grid · Drop placeholder · Handle empty lists · Include ... Click on and drag an element to a new spot within the list, and the other
            items ....</p>
        </div>

        <li><span></span></li>
        <div id="resumeItem">
          <h5 id="resume">Test & Test Council</h5>
          <h6 id="resume">Test Transport Test - Test</h6>
          <p id="resume">Test 2018 - Test Test (Test Test)</p>
          <p id="resume">Test, Test</p>
          <p id="resume">Reorder elements in a list or grid using the mouse. Examples. Default functionality · Connect lists · Display as grid · Drop placeholder · Handle empty lists · Include ... Click on and drag an element to a new spot within the list, and the other
            items ...</p>
        </div>
      </ul>
    </div>
    <!-- Council End -->
  </div>

Answer 1

您可以使用边框画线和绝对位置来调整您的元素符号。为了形象化，我刚刚创建了一支笔，使用 border left 绘制一条垂直线，使用 border bottom 绘制一条短水平线。

在您的情况下，我建议您将 list-style-type 设置为 none，在 li:before 中添加元素符号并在 ul 中添加填充

// using before to create the bullet
li:before
    display: block
    position: absolute
    left: 0 //position your bullet
    height: 24px
    width: 8px
    content: "" //add something here for your bullet, you can get from maybe fontawesome ot unicode shape
// then use after to create the line
li:after
    display: block
    position: absolute
    content: "" //leave this blank
    top: //adjust the position, e.g 4px
    left: //adjust the position, e.g 4px
    bottom: //adjust the position, e.g 2px, only if it is needed
    border-left: 2px solid #ff5800 //line color
// might as well create padding for ul
ul
    padding-left: 16px

// sample of code in a slight different case to show how the line can be drawn
https://codepen.io/irwanphan/pen/REpQPO 

我正在使用SASS来可视化代码，如果它是用CSS编写的，你可以在每个元素上添加{}和;到每个属性行。

希望对你有帮助 谢谢