jquery - 没有列表的元素符号列表

Question

我有以下 html 代码

<div class="magicbullets">
Nice
awesome
cool
</div>

我需要它表现得像

<div class="magicbullets">
<ul>
<li>nice</li>
<li>aweseome</li>
<li>cool</li>
</ul>
</div>

我可以包裹 <ul></ul>围绕内容，但我无法按行修改内容本身(很好，很棒，很酷)。我只需要选择使用 CSS 来实现我想要的。

我成功创建了所需的换行符

.magicbullets {
     white-space: pre-line;
} 

对于每个条目，但是 list-style-type没有列表就无法真正工作。

总结一下，它应该是这样的:

• 不错
• 棒极了
• 很酷

使用纯 CSS 可以做到这一点吗？还是需要某种客户端代码(JS、jQuery)或服务器代码(PHP)？

Answer 1

您可以使用 CSS 背景属性生成图案，然后将其放置在您需要的位置。

.magicbullets {
    white-space: pre-line;
    position: relative;
    margin-left: 1em;
} 

.magicbullets::before {
  position: absolute;
  content: "";
  display: block;
  height: 60px;
  width: 30px;
  top: 16px;
  left: -32px;
  background: radial-gradient(circle, black 10%, transparent 10%), 8px;
  background-size: 40px 20px;
}

<div class="magicbullets">
Nice
awesome
cool
</div>

您可以根据需要调整数字来获得子弹。