html nested li styles - цветная полоска перед каждой строкой - PullRequest
Новая
       21

html nested li styles - цветная полоска перед каждой строкой

0 голосов
/ 25 октября 2018

Я хочу стилизовать список, который получаю из поколения уценок.Сгенерированный HTML-код выглядит так: 

ul li {
    list-style-type: none;
    background: white;
    margin: 4px 0;
    padding-top: 4px;
    padding-left: 24px;
    border-left: 12px solid #5EAADF;
    background: #F6F8FA;
}

ul {
    padding-inline-start: 0;
}
<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1
        <ul>
          <li>Item 1.1.1</li>
        </ul>
      </li>
      <li>Item 1.2
        <ul>
          <li>Item 1.2.1
            <ul>
              <li>Item 1.2.1.1</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Я хочу добавить цветную полосу перед каждой строкой.Мне просто удалось стилизовать это так.Но то, что я хочу получить, это:

enter image description here

Есть ли какой-либо способ, с помощью которого можно сгенерировать HTML-код?

1 Ответ

0 голосов
/ 25 октября 2018

Это можно сделать с помощью псевдокода.

Однако без каких-либо изменений HTML я не думаю, что вы достигнете совершенства.Я бы сделал жизнь намного проще, если бы текст элементов <li> был бы обернут в <p> или <span>

ul li {
  list-style-type: none;
  background: white;
  margin: 4px 0;
  padding-top: 4px;
  padding-left: 24px;
  background: #F6F8FA;
  position: relative;
  line-height: 20px;
  /* Added */
}

ul li:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  height: 24px; /* line-height + padding-top */
  width: 12px; /* original border width */
  background-color: #5EAADF;
}

ul {
  padding-inline-start: 0;
  /* 
    Experimental technology, limited browser support
    See: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start
  */
}
<ul>
  <li>Item 1
    <ul>
      <li>Item 1.1
        <ul>
          <li>Item 1.1.1</li>
        </ul>
      </li>
      <li>Item 1.2
        <ul>
          <li>Item 1.2.1
            <ul>
              <li>Item 1.2.1.1</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
...