带项目符号的 HTML/CSS 垂直分隔线

Question

我只是想知道如何使用 HTML/CSS 获得这种 UI 设计：

应该是每次用户输入新数据时，都会用分隔符和项目符号显示数据。

我对 HTML/CSS 方面的这些 UI 设计不熟悉。

Answer 1

这太接近了。我唯一能想到的是你需要调整字体的固定大小，而且它在移动设备上可能不会很漂亮。https://jsfiddle.net/x6bthxgw/

HTML：

/* CSS:  */

    body {
      font-family: sans-serif;
    }
    
    ul.pretty-list {
      border-left: 1px solid grey;
      padding-left: 16px;
      margin-left: 200px;
      text-transform: uppercase;
    }
    
    ul.pretty-list li {
      list-style: none;
    }
    
    ul.pretty-list ul {
      padding-left: 0px;
    }
    
    ul.pretty-list h4 {
      color: skyblue;
      position: relative;
    }
    
    ul.pretty-list .date {
      margin-left:-216px;
      width:184px;
      text-align: right;
      padding-right: 1em;
      float: left;
      position:relative;
    }
    
    ul.pretty-list .date:after {
      content:"•";
      position: absolute;
      right:-10px;
      width:21px;
      font-size:30px;
      line-height:18px;
      text-align:center;
    }

<ul class="pretty-list">
      <li>
          <h4><div class="date">2015 - Present</div>Item 1</h4>
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
          </ul>
      </li>
      <li>
          <h4><div class="date">2014 - 2015</div>Item 2</h4>
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
          </ul>
      </li>

</ul>