Custom Unordered List is a CSS code for styling unordered lists.

cul-list.css

@charset "UTF-8";
/*
 * Custom Unordered List (CUL)
 * by techmagus Yuki
 * https://techmagus.ninja/styling-unordered-lists/
 *
 * Source code: https://gist.github.com/techmagus/e335c3b3197a0883c2aa
 *
 * Copyright © 2015, 2016 JC John Sese Cuneta
 *
 * License: Mozilla Public License Version 2.0 ("MPL 2.0")
 *   This Source Code Form is subject to the terms of the Mozilla Public
 *   License, v. 2.0. If a copy of the MPL was not distributed with this
 *   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * License: GNU LESSER GENERAL PUBLIC LICENSE Version 3 ("LGPLv3")
 *   This program is free software: you can redistribute it and/or modify
 *   it under the terms of the Lesser GNU General Public License as published by
 *   the Free Software Foundation, either version 3 of the License, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   Lesser GNU General Public License for more details.
 *
 *   You should have received a copy of the Lesser GNU General Public License
 *   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 **/

/* Global List Classes */
.cul-list > li {
  list-style-type: none !important;
}

/* Custom UL */
ul[class*="mark"] {
  margin-left: 0;
  padding-left: 0;
}
ul[class*="mark"] > li {
  margin-left: 23px;
}
/*
 * Optional:
 *   1. Use only if ordinary UL lists inside custom UL lists are not positioning correctly
 *   2. Do not forget to add class="ordfix" in the affected UL lists
 */
[class*="mark"] .ordfix {
  margin-left: 40px;
}

/*
 * Override order:
 *   hyphen-bullet < omark-black < omark-white < checkmark < checkmark-heavy < xmark < xmark-heavy
 */
[class~="hyphen-bullet"] > li::before,
li[class~="hyphen-bullet"]::before {
  content: "\2043\20";
}
[class~="omark-black"] > li::before,
li[class~="omark-black"]::before {
  content: "\25cf\20";
}
[class~="omark-white"] > li::before,
li[class~="omark-white"]::before {
  content: "\25cb\20";
}
[class~="checkmark"] > li::before,
li[class~="checkmark"]::before {
  content: "\2713\20";
}
[class~="checkmark-heavy"] > li::before,
li[class~="checkmark-heavy"]::before {
  content: "\2714\20";
}
[class~="xmark"] > li::before,
li[class~="xmark"]::before {
  content: "\2717\20";
}
[class~="xmark-heavy"] > li::before,
li[class~="xmark-heavy"]::before {
  content: "\2718\20";
}

/*
 * Colours
 *
 * 1. Colour override order: red < green < blue < yellow < gold < magenta < pink
 * 2. CUL-LIST Element override order: parent-declared < li-declared
 */
.list-red > li::before {
  color: rgba(255,0,0,1);
}
.list-green > li::before {
  color: rgba(0,127,0,1);
}
.list-blue > li::before {
  color: rgba(0,0,255,1);
}
.list-yellow > li::before {
  color: rgba(255,255,0,1);
}
.list-gold > li::before {
  color: rgba(255,215,0,1);
}
.list-magenta > li::before {
  color: rgba(255,0,255,1);
}
.list-pink > li::before {
  color: rgba(255,192,203,1);
}

/*
 * To make colour override work for our CUL-LIST
 *   we have to separate the li-level colours.
 *
 * Chained classes is not advisable, as it will color the text in CUL-LIST
 */
li.list-red::before {
  color: rgba(255,0,0,1);
}
li.list-green::before {
  color: rgba(0,128,0,1);
}
li.list-blue::before {
  color: rgba(0,0,255,1);
}
li.list-yellow::before {
  color: rgba(255,255,0,1);
}
li.list-gold::before {
  color: rgba(255,215,0,1);
}
li.list-magenta::before {
  color: rgba(255,0,255,1);
}
li.list-pink::before {
  color: rgba(255,192,203,1);
}