Skip to content
Fix Code Error

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

March 13, 2021 by Code Error
Posted By: Anonymous

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then everything becomes red!

While I only want to set the color of the square bullets. Is there an elegant way to define the color of the bullets in CSS…

…without using any sprite images nor span tags!

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}

Solution

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>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

Will work in all browsers, including IE from version 8 and up.

Answered By: Anonymous

Related Articles

  • Null pointer exception error as method parameter
  • How do I keep only the first map and when the game…
  • Is it possible to apply CSS to half of a character?
  • error LNK2005: ✘✘✘ already defined in…
  • Keeping the User logged in
  • Combining items using XSLT Transform
  • Tailswind css - "list-disc" is not styling bullets…
  • Javascript and css animation
  • How to prevent scrolling the whole page?
  • After a little scroll, the sticky navbar just is not…
  • What is your most productive shortcut with Vim?
  • SQL query return data from multiple tables
  • How to use if else if in button - flutter
  • CSS selector for first element with class
  • Fix top buttons on scroll of list below
  • How to pass TypeScript constants to Vue templates…
  • How to generate image sprites in ember-cli using compass?
  • Matplotlib scatter plot legend
  • Exception in Tkinter callback,TypeError: unsupported…
  • Flutter - Insert a Listview between two fixed containers
  • Java ElasticSearch None of the configured nodes are…
  • Filter data in DataTable Flutter
  • VueJS masonry layout
  • Named colors in matplotlib
  • How can I find text in a file and replace it?
  • In CSS Flexbox, why are there no "justify-items" and…
  • Web colors in an Android color xml resource file
  • Trying to keep dropdown menus flush to the edge of…
  • How to add a broccoli plugin to ember-cli app with…
  • Backbone Collection.fetch gives me Uncaught…
  • Jquery how to use this in a event datatable generated td row
  • how to create separate box for each category in flutter
  • Flutter - The method was called on null
  • How to call on a function found on another file?
  • sidebar background is not going full to the bottom
  • sql query to find priority jobs
  • Managing longs and short orders like LucF PineCoders…
  • Programmatically Lighten or Darken a hex color (or…
  • How to properly do JSON API GET requests and assign…
  • insert tables in dataframe with years from 2000 to…
  • Pygame masks Python
  • Repeatedly Toggle Div Background Color On Click…
  • Centering in CSS Grid
  • Pandas pivot_table: filter on aggregate function
  • Changing Icon Color behind ListTile in an…
  • Second line in li starts under the bullet after CSS-reset
  • Change Bootstrap tooltip color
  • How to use html template with vue.js
  • Access the route in different way in next js
  • Is there any function in Vue to check if the DOM…
  • vuetify change theme to a custom one
  • unexpected null value Flutter
  • Is there a way to change the color of an icon by…
  • Output HTML using underscore and backbone
  • Does "git fetch --tags" include "git fetch"?
  • Python Plotly Polar Chart Slice Alignment
  • TailwindCSS in Next.JS not rendering properly in Webkit
  • Convert python script to airflow dag
  • Flutter Multiple Checkbox From API
  • how to show all text (Flutter)?
  • Route's Model Hook with Ember Data "filter" not…
  • Can't install via pip because of egg_info error
  • Getting unique values in Excel by using formulas only
  • Neither BindingResult nor plain target object for…
  • json Uncaught SyntaxError: Unexpected token :
  • Typescript mixin constrained to typeof class
  • List of ANSI color escape sequences
  • plot different color for different categorical…
  • Checkbox Validation Without Arrow Functions using Svelte
  • What is the correct way to split an aurelia app into…
  • Godot 3.3.2 - Changing child variables from the…
  • How to use grpc-web in vue?
  • Custom html bullet points not showing, only normal…
  • Custom bullet symbol for elements in that is a…
  • Smart way to truncate long strings
  • Unity color wont assign to ball or what it should be…
  • Unknown difference between logic of OOP code…
  • Navbar not filling width of page when reduced to mobile view
  • ShowDialog doesn't change dropdownlist
  • Javascript to dynamically format lists from items…
  • .gitignore and "The following untracked working tree…
  • How do I merge two dictionaries in a single…
  • setting textColor in TextView in layout/main.xml…
  • What is git tag, How to create tags & How to…
  • How do I have matplotlib plot different edgecolors…
  • Algorithm to randomly generate an…
  • Why is processing a sorted array faster than…
  • How do i arrange images inside a div?
  • Pandas dataframe amend entry based on partial match…
  • Plotting multiple lines, in different colors, with…
  • Generate a random point within a circle (uniformly)
  • SQL find sum of entries by date including previous date
  • How can I center all my contents in html?
  • How to iterate through an ArrayList of Objects of…
  • Azure Sql : Unable to Replace HTML String
  • How to separate opening and closing tag by…
  • Idea of how to make a slider of images
  • Java: Local variable mi defined in an enclosing…
  • The definitive guide to form-based website authentication
  • Casting &i32 as usize

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

‘git’ is not recognized as an internal or external command

Next Post:

How do you comment out code in PowerShell?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error