List style type css color. Add bullets or numbering to text
Task
Change the appearance of markers in the list and replace them with another symbol.
Solution
Using HTML or CSS, you can set one of three types of markers: disc (dot), circle (circle), square (square). You need to add these values to the list-style-type style property, which is specified for the UL or LI selector (example 1).
Example 1: Standard markers
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Cheburashka
- Crocodile Gena
- Shapoklyak
In this example, a square is used as markers (Fig. 1).
Rice. 1. Type of markers
Selecting and setting your own marker symbol occurs in a very unique way, through the :before pseudo-element. The first step is to remove bullets from the list altogether by setting the list-style-type property to none, and then add the :before pseudo-element to the LI selector. The symbol output itself is carried out using the content property, the value of which is the desired text or symbol (example 2).
Example 2: Using:before and content
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Cheburashka
- Crocodile Gena
- Shapoklyak
In this example, the default marker is hidden and a symbol is added in its place (Figure 2).
Rice. 2. Markers in the form of a symbol
To set some tricky symbol as a marker, you can use Microsoft Word or a symbol table, this is a standard program included with Windows. The code encoding must be UTF-8.
To somehow distinguish the lines of a bulleted list from the main text, you can make the color of the bullets in the list different from the color of the text.
The default is a black dot. If you simply set the color to the li element, then nothing will work - the color will be set to the entire line, and you only need to change the color of the marker (ul li color of the dots).
How to Change Bullet Color Using CSS
- Hiding the original list markers using the property list-style-type
- Adding Your Own Markers Using a Pseudo-Element :before and properties content. This will allow you to insert any text or character before the element li.
- The appearance of the marker can be controlled through CSS styles, changing the color, font, background, and more. I used bold Montserrat font.
If you have a situation where markers appear in unnecessary places, for example in the main menu or in a duplicate menu in the footer, then this can be easily fixed. Just add a parent element that contains lists whose marker colors we need to change. I added the word article and now these changes apply only to the content area of the site.
article li ( list-style-type: none; /* Hide default markers */ ) article li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Marker color */ content: " "; /* Marker */ padding-right: 7px; / * Indent from marker to text */ )Change color of bullets in HTML list without using range (6)
For me the best option is to use CSS pseudo elements, so for disc bullet disc it would look like this:
ul ( list-style-type: none; ) li ( position: relative; ) li:before ( content: ""; display: block; position: absolute; width: 5px; /* adjust to suit your needs */ height: 5px; /* adjust to suit your needs */ border-radius: 50%; /* adjust to suit your needs */ top: 0.5em; /* adjust to suit your needs * / )
- first
- second
- third
- width and height should be equal values to keep pointers rounded
- you can set border-radius to zero if you want to have square bullets
For more bullet styles you can use other css shapes https://css-tricks.com/examples/ShapesOfCSS/ (choose this one which doesn't require pseudo elements like triangles)
I was wondering if there was a way to change the color on the bullets in the list.
I have a list:
- House
- Garden
It is not possible to insert anything into li, such as "span" and "p". Can I change the color of the bullets but not the text in some clever way?
If you can use an image, you can do it. And without an image, you won't be able to change the color of the bullet, not the text.
Using an image
Li ( list-style-image: url(images/yourimage.jpg); )
Without using an image
Then you need to edit the HTML markup and include the span inside the list and color both the span and the span with different colors.
I really liked Mark's answer too - I need a set of different colored ULs and obviously it would be easier to just use a class. Here's what I used for the orange, for example:
Ul.orange ( list-style: none; padding: 0px; ) ul.orange > li:before ( content: "\25CF "; font-size: 15px; color: #F00; margin-right: 10px; padding: 0px ;line-height: 15px;
Also, I discovered that the hex code I used for "content:" was different than Marc's (that hex circle seemed too tall). The one I used seems to sit perfectly in the middle. I also found several other shapes (squares, triangles, circles, etc.)
We can combine list-style-image with svg s which we can embed in css! This method offers incredible control over "bullets" that can become anything.
To get a red circle just use the following css:
"); }
But this is just the beginning. This allows us to do any crazy thing we want with these bullets. circles or rectangles are easy, but anything you can draw with svg, you can go there! See the apple apple example below:
ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ) ul.multi-color ( list-style-image: url("data:image/svg+xml, "); }
- Big circles!
- Big rectangles!
- b
- Small circles!
- c
- Small rectangles!
- Bulls
- eyes.
- Multi
- color
Attribute width/height
Some browsers require the width and height attributes to be set to
Encodings
Building on both @Marc and @jessica's solutions, this is the solution I use:
Li ( position:relative; ) li:before ( content:""; display: block; position: absolute; width: 6px; height:6px; border-radius:6px; left: -20px; top: .5em; background- color: #000;
I use em for font sizes, so if you set top to .5em it will always be placed in the middle of your first line of text. I used left:-20px because this is the default left:-20px position in browsers: parent padding/2
I know this is a really, really old question, but I was playing with this and came up with a way that I hadn't seen. Give the list a color, and then override the text color using the ::first-line selector::first-line . I'm no expert, so there may be something wrong with this approach that I'm missing, but it seems to work.
li ( color: blue; ) li::first-line ( color: black; )
- House
- Garden
There are two popular ways to change the color of bullets to be different from the text color.
Usage
Inside each element
create a design
In this case, the color of the markers is determined by the color style property for the li selector, and the text color is determined by the span selector (example 1).
Example 1: Using Nested Tags
- Violin
- Guitar
- Bagpipes
- Organ organ
- Celesta
The result of this example is shown below (Figure 1).
Rice. 1. Markers that differ in color from the main text
Despite its simplicity, the method is inconvenient, especially with voluminous lists, because now you will have to add to each list item .
Usage::before
The point is this: we remove the original list markers through the list-style-type property and add our own markers using the ::before pseudo-element and the content property. This link allows you to insert any text or symbol before an element, in this case
Example 2: Using the ::before pseudo-element
- North
- South
- West
- East
The result of this example is shown in Fig. 2.
CSS lists— a set of properties responsible for the design of lists. Using HTML lists is very common when creating website navigation bars. List items represent a collection of block elements.
Using standard CSS properties you can change the appearance of the list marker, add an image for the marker, and also change marker location. The height of the marker block can be set with the line-height property.
Designing lists using CSS styles
1. List marker type list-style-type
The property changes the marker type or removes the marker for bulleted and numbered lists. Inherited.
| list-style-type | |
|---|---|
| Values: | |
| disc | Default value. A filled circle acts as a marker for list items. |
| Armenian | Traditional Armenian numbering. |
| circle | An open circle acts as a marker. |
| cjk-ideographic | Ideographic numbering. |
| decimal | 1, 2, 3, 4, 5, … |
| decimal-leading-zero | 01, 02, 03, 04, 05, … |
| georgian | Traditional Georgian numbering. |
| hebrew | Traditional Hebrew numbering. |
| hiragana | Japanese numbering: a, i, u, e, o, … |
| hiragana-iroha | Japanese numbering: i, ro, ha, ni, ho, … |
| katakana | Japanese numbering: A, I, U, E, O, … |
| katakana-iroha | Japanese numbering: I, RO, HA, NI, HO, … |
| lower-alpha | a, b, c, d, e, … |
| lower-greek | Lowercase characters of the Greek alphabet. |
| lower-latin | a, b, c, d, e, … |
| lower-roman | i, ii, iii, iv, v, … |
| none | There is no marker. |
| square | A filled or unfilled square acts as a marker. |
| upper-alpha | A, B, C, D, E, … |
| upper-latin | A, B, C, D, E, … |
| upper-roman | I, II, III, IV, V, … |
| initial | Sets the property value to the default value. |
| inherit | Inherits the property value from the parent element. |
Syntax
Ul (list-style-type: none;) ul (list-style-type: square;) ol (list-style-type: none;) ol (list-style-type: lower-alpha;) 
Rice. 1. Example of designing bulleted and numbered lists
2. Images for list items list-style-image
You can use images and gradient fills as list item markers. Inherited.
Syntax
Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);) 
Rice. 2. Design a bulleted list using an image 
Rice. 3. Design a bulleted list using a gradient
3. List-style-position
This property provides the ability to place the marker outside or inside the content of the list item. Inherited.