自定义项目符号和段落左边距自定义

Question

我创建了一些CSS来定制<li>元素的项目符号：

ul { 
  list-style: none;  
} 

ul li::before { 
 font-size: 30px;
 content: "\25AA";   
 color: #cc0c10;  
 display: inline-block;  
 width: 0.8em;  
 margin-left: 0.6em;  
 transform: translateY(5px);
} 

li {
  margin-bottom: 10px;
  text-align: justify;
}

但是，似乎在调整margin-left和width属性时，它仅适用于第一行而不适用于整个<li>内容，该如何实现？

实时示例：https://codepen.io/ehouarn-perret/pen/PMmNZN?editors=1100

Answer 1

更新笔：

https://codepen.io/chille1987/pen/MNmydZ?editors=1100

ul{ 
  list-style: none;  
} 

ul li::before { 
 font-size: 30px;
 content: "\25AA";   
 color: #cc0c10;  
 display: inline-block;  
 width: 0.8em;
 position: absolute;
 top: -8px;
 left: 0; 
} 

li {
  position: relative;
  margin-bottom: 10px;
  text-align: justify;
  padding-left: 20px;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum ante vel pellentesque luctus. Aenean est nulla, rhoncus ut nunc et, pellentesque varius nunc. Integer lacus massa, lacinia in turpis et, tristique ultricies ligula. Sed vel malesuada tellus, in consequat libero. Quisque dui nisi, malesuada quis libero quis, laoreet consequat ligula. Phasellus a ligula porta, tincidunt nulla vitae, elementum risus. Nulla eu dignissim ligula.</li>
  <li>Suspendisse vitae eros quis justo egestas tempus at fermentum odio. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum egestas mi tellus, at semper arcu dignissim sed. Ut tempor ligula ut eros dictum scelerisque. Ut tempus nec nisl eget dictum. Donec sagittis pharetra turpis, nec ullamcorper odio feugiat eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eget sagittis nisl, ac malesuada dui. Vestibulum porta urna a fermentum sollicitudin. Nullam porta commodo urna a pulvinar. Vestibulum a semper urna. Mauris dapibus accumsan ipsum eget viverra. Suspendisse vitae tellus rutrum, egestas est in, sollicitudin urna.</li>
  <li>Pellentesque iaculis ut nunc a tempor. Donec sodales luctus tellus pretium tempor. Aenean egestas leo id ex pharetra commodo. In laoreet porttitor tellus non luctus. Nullam pretium pulvinar arcu nec sollicitudin. Quisque sed nulla imperdiet nulla commodo egestas convallis ac arcu. Sed sit amet turpis tellus. Integer luctus justo a rhoncus vulputate. Duis scelerisque accumsan nibh, vel facilisis urna eleifend sed. Suspendisse hendrerit ipsum ut velit convallis imperdiet. Sed condimentum nisl sed quam laoreet tincidunt.</li>
</ul>