Bullet-like list without list

Question

I have the following html-Code

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

I need it to behave like

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

I could wrap the <ul></ul> around the content, but I cannot modify the content itself by line (nice,awesome,cool). I only have to option to use CSS to achieve what I want.

I managed to create the required new-Line

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

for each entry, but list-style-type does not really work without a list.

To sum up This is what it should look like:

nice
awesome
cool

Is this doable using pure CSS or is some kind of clientcode(JS, jQuery) or servercode(PHP) needed?

Are you open to using PHP? You could write a function that converts line breaks into LIs? — Craig, Dec 16 '16 at 16:29
Possible duplicate of [Is there a CSS selector for text nodes?](http://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes) — Serlite, Dec 16 '16 at 16:37
(Aka. No, not possible with your current markup without JS or PHP.) — Serlite, Dec 16 '16 at 16:37
@Serlite Definitely possible with CSS alone, just very tedious... — sol, Dec 16 '16 at 17:06
The best I can think of is something along the lines of `.magicbullets:nth-child(n+1)::before` — , Dec 16 '16 at 18:43

sol · Accepted Answer · 2020-05-11T22:35:42.253

5

You can use CSS background property to generate a pattern and then position it where you need.

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

You can play around with the numbers to get the bullets as you'd like.

edited May 11 '20 at 22:35

answered Dec 16 '16 at 16:55

sol

22,311
6
42
59

May I ask what is the element that produces 3 bullets ? – Apostolos May 11 '20 at 21:31
@Apostolos Hi, it's a pseudoelement with a pattern of repeating dots, positioned to line up with the text. – sol May 11 '20 at 22:36

score 2 · Answer 2 · edited Dec 16 '16 at 17:57

One more CSS solution (but I would really go with JavaScript/jQuery):

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

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

So, find good transparent dot/bullet(s) .png, and play with it and :before pseudo-element, a little.

score 1 · Answer 3 · edited Dec 16 '16 at 17:56

1

If you are fine with JQuery code then I can suggest following solution. You can split the html and append the li in the given class. Use this fiddle:

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);

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

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

edited Dec 16 '16 at 17:56

user229044

232,980
40
330
338

answered Dec 16 '16 at 16:34

RonyLoud

2,408
2
20
25

As I said: No ClientCode(JS) – Ole Albers Dec 17 '16 at 19:50

clint rock · Answer 4 · 2016-12-16T16:43:14.027

-5

CSS:

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

Hope it helps, using it like :

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

Should output :

nice
awesome
cool

edited Dec 16 '16 at 16:43

answered Dec 16 '16 at 16:35

clint rock

31
2
10

4

_"but I cannot modify the content itself"_ – j08691 Dec 16 '16 at 16:48
2
If the user is able to modify the markup, then the correct solution is to just add a `
- `s, not to invent a `` tag.
– user229044 Dec 16 '16 at 17:58

Bullet-like list without list

4 Answers4

Linked

Related