无法使用自定义项目符号<li>设置<li>元素文本的样式

Question

我使用自定义项目符号设置了<ul>列表，如下所示。

问题是我希望文本显示如下图所示：

所以，基本上，溢出的文本不应该在子弹下方。我尝试了这里提供的解决方案，但它在我的案例中没有用。

＆＃13;

＆＃13;

ul{
  width: 300px;
  border: 1px solid black;
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  list-style: none;
  list-style-position: inside;
  position: relative;
  margin-left: 1em;
}

ul li:before {
  content: '\25A0';
  color: #3023AE;
  line-height: 0;
  font-size: 1.5rem;
  vertical-align: middle;
  padding-bottom: 0.5rem;
}

＆＃13;

<ul>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
  <li>Four million Americans are suffering from the after effects of stroke</li>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

我该如何解决这个问题？

Answer 1

你可以这样使用它

    ul{
      width: 300px;
      border: 1px solid black;
      margin-left: 0;
      list-style-type: none;
      padding-left:0px;
    }

    ul li {
      list-style: none;
      position: relative;
      margin-left: 1em;
      display:block;
      background:url('http://i.imgur.com/YR9XMuc.png') no-repeat center left ;
      padding-left:30px;
    }

<ul>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
  <li>Four million Americans are suffering from the after effects of stroke</li>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
</ul>

Answer 2

绝对定位前伪元素：

＆＃13;

＆＃13;

ul {
  width: 300px;
  border: 1px solid black;
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}
ul li {
  list-style: none;
  list-style-position: inside;
  position: relative;
  margin-left: 1em;
}
ul li:before {
  content: '\25A0';
  position: absolute;
  top: 6px;
  left: -15px;
  color: #3023AE;
  line-height: 0;
  font-size: 1.5rem;
  vertical-align: middle;
  padding-bottom: 0.5rem;
}

＆＃13;

<ul>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
  <li>Four million Americans are suffering from the after effects of stroke</li>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
</ul>

＆＃13;

＆＃13;

＆＃13;