HTML/CSS : Custom ul list

Question

我的列表设计如下图:

如您所见，文本有一个带装饰蓝点的左边距，加上文本向左对齐。所以我的问题是如何自定义 ul 列表，如设计、左边距和最后一个文本对齐-留下上面的其他文字。

P/S:这是我可以尝试做的。

ul{
  font-size: 16px;
  font-weight: 400;
  color: #2e3192;
  margin-left: 20px;
  margin-top: 17px;
  list-style: square inside url("BlueDot.png");
}
li{
  margin-top: 17px;
}

<ul>
  <li>Finance Leases</li>
  <li>Operating Leases</li>
  <li>Installment Sales</li>
  <li>Cross-Border Leases &<br/> Leases Denominated in<br/> Local Currencies</li>
</ul>

Answer 1

给你

ul {
  background: #469eb4;
  width: 400px;
}

li {
  list-style: none;
  color: #2c3d95;
  position: relative;
  padding-left: 20px;
}

li:after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2e3192;
  position: absolute;
  left: 0%;
  top: 40%;
}

<ul>
  <li>Finance Leases</li>
  <li>Operating Leases</li>
  <li>Installment Sales</li>
  <li>Cross-Border Leases &<br/> Leases Denominated in<br/> Local Currencies</li>
</ul>