标签：top 元素 li 使伪 position 20px line css left

实现左侧线高度继承内容高度，无论内容多少行左侧线随内容高度增减。

style：

  <style>
    ul,li {
      list-style: none;
    }
    .line {
      width: 300px;
    }
    .line li {
      position: relative;
      padding: 10px;
    }
    .line li::before {
      position: absolute;
      top: 20px;
      left: -30px;
      content: "";
      width: 20px;
      border-top: 2px solid #4e54fccc;
    }
    .line li::after {
      position: absolute;
      top: 20px;
      left: -30px;
      content: "";
      height: 100%;
      border-left: 2px solid #4e54fccc;
    }
    .line li:last-child:after {
      display: none;
    }
  </style>

html:

  <ul class="line">
    <li>value:必需， 要转换的 JavaScript 值（通常为对象或数组）。</li>
    <li>如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。</li>
    <li>如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。</li>
  </ul>

标签：top,元素,li,使伪,position,20px,line,css,left
来源： https://www.cnblogs.com/duhui/p/16350988.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。