CODEWITHSUNDEEP
jquerycss
Ole Albers
Ole Albers

Reputation: 9295

Bullet-like list without list

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:

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

Upvotes: 2

Views: 2120

Answers (4)

sol
sol

Reputation: 22949

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.

Upvotes: 5

sinisake
sinisake

Reputation: 11328

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.

Upvotes: 2

RonyLoud
RonyLoud

Reputation: 2436

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>

Upvotes: 1

clint rock
clint rock

Reputation: 31

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

Upvotes: -5

Related Questions