Setting the list marker in different ways. I want to change the marker type to another character
CSS Lists- a set of properties responsible for the design of lists. The use of HTML lists is very common when creating site navigation bars. List elements represent a set of block elements.
Using standard CSS properties, you can change appearance list marker, add image for marker, and change marker location. The height of the marker block can be set with the line-height property.
Styling Lists with CSS Styles
1. List marker type list-style-type
The property changes the marker type or removes marker for bulleted and numbered lists. Inherited.
| list-style-type | |
|---|---|
| Values: | |
| disc | Default value. A filled circle acts as a list item marker. |
| armenian | Traditional Armenian numbering. |
| circle | An unfilled 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 Jewish 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 | The marker is missing. |
| 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 value of a property to its 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. An example of the design of bulleted and numbered lists
2. Images for list-style-image elements
Images and gradient fills can be used 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. Designing a Bulleted List with an Image 
Rice. 3. Styling a Bulleted List with a Gradient
3. List marker location list-style-position
This property provides the ability to position the marker outside or inside the contents of the list element. Inherited.
There are two popular ways to change the color of the bullets so that they are different from the color of the text.
Usage
Inside each element
create a structure
In this case, the color of the markers is determined by the color style property for the li selector, and the color of the text is determined by the span selector (example 1).
Example 1: Using nested tags
- Violin
- Guitar
- Bagpipes
- barrel organ
- Celesta
The result of this example is shown below (Fig. 1).
Rice. 1. Markers that differ in color from the body text
Despite its simplicity, the method is inconvenient, especially with large lists, because now you have to add to each list item .
Usage::before
The idea is to remove the original list markers via the list-style-type property and add our own markers via the ::before pseudo-element and the content property. Such a link allows you to insert any text or character before the element, in this case
Example 2: Using pseudo-element::before
- North
- South
- West
- East
The result of this example is shown in Fig. 2.
Task
Set the color of markers in the list without changing the color of the text.
Solution
There are two ways to change the color of markers, let's call them simple and tricky. A simple method is that inside
Example 1: Using nested tags
HTML5 CSS 2.1 IE Cr Op Sa Fx
- Violin
- Guitar
- Bagpipes
- barrel organ
- Celesta
The result of this example is shown below (Fig. 1).
Rice. 1. Markers that differ in color from the body text
Despite the simplicity, the method is inconvenient, especially with large lists, because now you have to add a tag to each list item . Therefore, we will analyze a tricky way, completely based on the work of CSS.
| Internet Explorer | Chrome | Opera | safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
The idea is to remove the original list markers via the list-style-type property and add our own markers via the :before pseudo-element and the content property. This binding allows you to insert any text or character before an element, in this case LI . Moreover, the type of text (color, font, background, etc.) can also be controlled through styles, which is demonstrated in example 2. Here, the paragraph symbol ¶ is used as markers.
Example 2: Using the pseudo-element:before
HTML5 CSS 2.1 IE Cr Op Sa Fx
- North
- South
- West
- East
The result of this example is shown in Fig. 2.
Rice. 2. Markers created with styles
Change bullet color in HTML list without using range (6)
For me the best option is to use CSS pseudo-elements, so for the disc bullet 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%; left: -15px; /* adjust to suit your needs */ top: 0.5em; background: #f00; /* adjust to suit your needs * / )
- first
- second
- third
- width and height must be equal 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 which doesn't require pseudo elements like triangles)
I was wondering if there is 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 somehow smart way?
If you can use an image, you can. And without an image, you won't be able to change the color of just the bullets, not the text.
Image use
Li ( list-style-image: url(images/yourimage.jpg); )
Without using an image
Then you need to edit HTML markup and include span inside list and color li and span with different colors.
I also really liked Mark's answer - 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 found 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 we can embed in css! This method offers incredible control over "bullets" that can become anything.
To get the red circle just use the following css:
"); }
But this is only the beginning. This allows us to do any crazy thing we want with these bullets. circles or rectangles is easy, but anything you can draw with svg can go there! Check out the apple tree 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 solutions 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 that's the default left:-20px position in browsers: parent padding/2
I know this is a really, really old question, but I've been playing around with this and came up with a way I didn't see. Give the list a color and then override the text color with the::first-line selector::first-line . I'm not an expert, so there might 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
Task
Change the appearance of markers in the list and replace them with a different symbol.
Solution
WITH using HTML or CSS it is allowed to 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
Choosing and setting your own marker character is done in a very peculiar way, via the :before pseudo-element. First, remove the bullets from the list altogether by setting the list-style-type style property to none , and then adding the :before pseudo-element to the LI selector. The character output itself is carried out using the content property, the value of which is the desired text or character (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 instead (Fig. 2).
Rice. 2. Symbol markers
To set some tricky character as a marker, you can use Microsoft program Word or character table is standard program included in Windows kit. Code encoding must be UTF-8.