Как сделать рамку с моим маркером для моего списка в стиле градиента?

Question

Вот чего я хочу достичь:

Предметы с белым фоном - это мой список. С левой стороны я хочу иметь рамку с пользовательскими маркерами (пользовательскими, поскольку мы не можем изменить цвет маркера списка по умолчанию -black- AFAIK). Верхняя часть границы должна иметь цвет градиента, например, от прозрачного до серого. Как вы также видите на рисунке, длина границы должна быть больше, чем фактическая высота списка (до кнопки «плюс», а не до конца последнего элемента).

Я действительно достиг некоторых частей, но я хотел бы узнать лучший, более чистый способ сделать это.

Это то, что я имею до сих пор: https://jsfiddle.net/6esLm8q1/

.list {
  list-style: none;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(179,179,179)) 0 0 0 1;
}

.item {
  margin-bottom: 1em;
  margin-left: -1.7em;
}

.item::before {
  content: "\2022";
  color: grey;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

<ul class="list">
<li class="item">
Test1
</li>
<li class="item">
Test2</li>
</ul>

<button>Plus
</button>

Проблемы все еще остаются: выравнивание маркеров по тексту элемента, даже если я выравниваю маркеры на границе, при изменении размера окна пули слегка сдвигаются влево или вправо.

Градиентная линия в начале гораздо более прозрачна, не совсем так, как на картинке «Цель». И граница заканчивается там, где заканчиваются элементы списка, поэтому она не доходит до кнопки.

Я ценю любую помощь, пока не получу что-то близкое к моей целевой картинке!

Answer 1

У тебя там 99%. Для linear-gradient, если вы определите конечную точку ниже, чем 100%, вы получите ее исчезновение раньше. В противном случае он вычисляет конечную точку как 100% и, таким образом, половина вашей границы выглядит блеклой.

Для псевдоэлемента before, поскольку в вашей разметке вы помещаете тег p в каждый li, вы должны поместить псевдоэлемент в сам тег p.

См. Фрагмент ниже.

.list {
  list-style: none;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,  rgba(179,179,179) 40%) 0 0 0 1; /* add % to have gradient end earlier than end */
}

/* add before pseudo-element on p tag (since you include it in your markup */
.item>p:before {
  content: "\2022";
  color: grey;
  font-weight: bold;
  margin-left: -2.7em;
}

<ul class="list">
    <li class="item">
        <p>
            Test1
        </p>
    </li>
    <li class="item">
        <p>
            Test2
        </p>
    </li>
</ul>

<button>Plus</button>

Answer 2

Я думаю, что ваше решение уже довольно хорошее. Я бы создал круги с border-radius, так как у вас больше контроля над размерами и положением.

Вот пример:

.list {
  list-style: none;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(179, 179, 179)) 0 0 0 1;
  margin: 0 0 0 1em;
}

.item {
  position: relative;
}

.item:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: grey;
  left: -2.75em;
  top: .4em;
}

button {
  display: inline-block;
  width: 2em;
  height: 2em;
  margin: -.2em 0 0 .25em;
  border-radius: 50%;
  background: #c00;
  color: white;
  border: none;
}

<ul class="list">
  <li class="item">
    <p>Test1<br>test with line break</p>
  </li>
  <li class="item">
    <p>Test2<br>test with<br>two line breaks</p>
  </li>
</ul>
<button>+</button>


<ul class="list">
  <li class="item">
    <p>Test1</p>
  </li>
  <li class="item">
    <p>Test2</p>
  </li>
</ul>
<button>+</button>

Answer 3

Важно ли быть простым CSS? С моей точки зрения, вы пытаетесь решить проблему с неправильными инструментами.

Что если вы разделите элемент, сделав линию слева и маркер с отдельными элементами, расположенными абсолютно в области заполнения контейнера, а содержимое на субконтиненте?

Примерно так:

body {
  background-color: #ededed;
}

.tail {
  border-left-style: solid;
  border-left-width: 2px;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(179,179,179)) 0 0 0 1;
  height: 20px;
  margin-left: 20px;
}

.list {
  font-size: 20px;
  color: rgba(179,179,179);
  list-style: disc;
  border-left: 2px solid rgba(179,179,179);
  margin: 0 0 0 20px;
  box-sizing: border-box;
  padding-bottom: 20px;
  padding-left: 15px;
}

.item {
  margin-bottom: 5px;
}

.item > div {
  color: #555;
  background-color: white;
  padding: 5px;
  font-size: 14px;
  font-family: sans;
  border-radius: 5px;
}

button {
  border-radius: 50%;
  background-color: #b30920;
  border: none;
  color: white;
  box-sizing: border-box;
  padding: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  vertical-align: top;
  font-size: 33px;
  margin: 0;
}

<div class="tail"></div>
<ul class="list">
  <li class="item"><div>Test1</div></li>
  <li class="item"><div>Test2<br>test</div></li>
</ul>

<button>+</button>