Question

我有以下html-Code

<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 background属性生成模式，然后将其放置在您需要的位置。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

你可以随心所欲地使用这些数字来获得你想要的子弹。

Answer 2

还有一个CSS解决方案（但我真的会使用JavaScript / jQuery）：

＆＃13;

.magicbullets {
     white-space: pre-line;
     position:relative;
       overflow:hidden;
       padding-left:13px;
} 
.magicbullets:before {
 content: " ";
 background-image:url('https://d30y9cdsu7xlg0.cloudfront.net/png/120114-200.png');
  position: absolute;
    left:-5px;
    top:20px;
    width:200px;
    height:200px;
    background-size:10% 10%;
    background-repeat:repeat-y;
  
}

＆＃13;

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

＆＃13;

所以，找到好透明的dot / bullet（s）.png，并用它和:before伪元素一点点玩。

Answer 3

如果您对JQuery代码没问题，那么我可以建议以下解决方案。您可以在split中append html和li class。使用此fiddle：

＆＃13;

var ul=$('<ul>');
var html = $('.magicbullets').html().split('\n');
$.each(html,function(index,element){
if(element !="")
{
var li = $('<li>',{text : element});
ul.append(li);
}
});
$('.magicbullets').empty().html(ul);

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="magicbullets">
Nice
awesome
cool
</div>

＆＃13;

Answer 4

CSS：

bullet:before {
    content: "•";
    padding-right: 8px;
    color: blue;}

希望它有所帮助，使用它如：

<bullet>nice</bullet><br>
<bullet>awesome</bullet><br>
<bullet>cool</bullet><br>

应输出：

好的
真棒
凉爽

类似子弹的列表没有列表

4 个答案: