How to change the bullet color of an HTML list without using a span with CSS?

To change the bullet color of an HTML list without using a span with CSS, we set the list-style-image property.

For instance, we write

li {
  list-style-image: url(images/yourimage.jpg);
}

to set the list-style-image property to url(images/yourimage.jpg) to set the bullet to an image.

How to detect when CSS property changed using JavaScript?

To detect when CSS property changed using JavaScript, we listen for the DOMAttrModified event.

For instance, we write

document.documentElement.addEventListener(
  "DOMAttrModified",
  (e) => {
    if (e.attrName === "style") {
      console.log(e.prevValue, e.newValue);
    }
  },
  false
);

document.documentElement.style.display = "block";

to listen for the DOMAttrModified event on the body element with document.documentElement.addEventListener.

Then we check if the style attribute is changed with e.attrName in the event listener.

We get the previous value of it with e.prevValue and the latest value with e.newValue.

Then when we change the style property, the event will be triggered.

How to get flexbox to include padding in calculations with CSS?

To get flexbox to include padding in calculations with CSS, we use flex-grow with padding.

For instance, we write

.item {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 10px 10px 0;
}

to make the elements with class item a flex container with display: flex;.

We add flex-direction: column; to make the flex direction vertical.

We add flex: 1; to make it stretch with flex-grow with padding being taken accoount in the height calculation.

And then we add padding with padding: 0 10px 10px 0;

How to add horizontal list items with CSS?

To add horizontal list items with CSS, we display the li elements as inline block elements.

For instance, we write

<ul>
  <li><a href="#">some item</a></li>
  <li><a href="#">another item</a></li>
</ul>

to add a ul with some li elements.

Then we write

ul > li {
  display: inline-block;
}

to make the li’s display as inline block elements to make them display horizontally.