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

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-leftandwidth属性时，它仅适用于第一行而不适用于整个<li>内容，我该如何实现呢？

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

标签： htmlcss

Answer 1

Updated pen:

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>