Bullet Point Background Color Attribute? CSS

Bullet point background color attribute? CSS

Demo

If you don't wish to use <span> or <div>

You can use :before to add custom bullet to your li

li {
    list-style:none;
}

li:before {
    content: "";
    position:relative;
    left: -10px;
    background-color:red;

    display:inline-block;
    width:5px;
    height:5px;
}

how to change background color of unordered list that includes the bullet

If the bg is a plain background-color, then box-shadow can do the trick.

ul { 
  list-style-type: square;
}

ul li {
  margin-bottom: 10px;
  box-shadow:  -2em 0 #f5f5f5
}

.gray-bg {
  background-color: #F5F5F5;
  padding: 10px;
}
 

<ul>
  <li class="gray-bg">
    <p>Line 1</p>
  </li>
  <li class="gray-bg">
    <p>Line 2</p>
  </li>
  <li class="gray-bg">
    <p>Line 3</p>
  </li>
  <li class="gray-bg">
    <p>Line 4</p>
  </li>
</ul>

How can I change the colour of each bullet point of a li item?

Remove the default bullets, and add bullet characters (U+2022 BULLET or some other) as generated content. You can style the generated content separately. This is flexible and requires no extra markup (beyond some markup that distinguishes between different items, obviously) but has the drawback of failing on old versions of IE (no support to generated content).

Assuming markup

<ul class="mixed">
  <li class="red">One.</li>
  <li class="green">Two.</li>
</ul>

the style sheet could be

ul.mixed {
  list-style-type: none;
}
ul.mixed li:before {
 content: "\2022";
 padding-right: 0.5em;
}
li.red:before {
  color: red;
}
li.green:before {
  color: green;
}

How can I style bulletpoint so that it has a blurred background and a solid center?

Just add color stops to your gradient

background-image: radial-gradient(circle, white 20%, transparent 20%, transparent); 

#scroll-bullets {
  width: 100px;
  background-color: blue;
  padding: 20px;
}

.sbn ul {
  list-style: none;
  text-align: center;
}

.sbn ul li {
  display: block;
  margin-bottom: 20px;
}

.sbn ul li a {
  display: block;
  width: 10px;
  height: 10px;
  font-size: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  box-sizing: border-box;
  transition: .2s ease-in-out;
}

.sbn05 ul li a {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 50%;
}

.sbn05 ul li a.is-active,
.sbn05 ul li a:hover {
  background-image: radial-gradient(circle, white 20%, transparent 20%, transparent);
  transform: scale(2);
}

<div id="scroll-bullets" class="sbn sbn05">
  <ul>
    <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>

</div>

Change a bullet point color within a before selector with CSS

I don't think that you can achieve this with a pseudo class but you could do something like this.

h3 {
  display:block;
}

h3 .red {
  font-size: 40px;
  margin-right: 24px;
  margin-bottom: 8px;
  color: red;
}

<h3>1<span class="red">.</span></h3>
<h3> Test</h3>

How to change background color of list item image bullet?

Use :

li{
list-style-image:url();
list-style-position: inside;
}

See: http://jsfiddle.net/pqf1stam/2/

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

The most common way to do this is something along these lines:

ul {  list-style: none;  padding: 0;  margin: 0;}
li {  padding-left: 1em;   text-indent: -.7em;}
li::before {  content: "• ";  color: red; /* or whatever color you prefer */}

<ul>  <li>Foo</li>  <li>Bar</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

Is there a way to extend background color of unordered list items to go behind bullets?

Use list-style-position: inside.

---

Related Topics