# Sử dụng list-style-type để tạo icon đẹp (ok)

<figure><img src="/files/ZNsD5d3BbTEJMCHjB4Tt" alt=""><figcaption></figcaption></figure>

```

li {
    display: list-item;
    list-style-type: "🤯";
    padding-inline-start: 1ch;
}
```

```
li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
```

```
li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
```

<figure><img src="/files/E2waLHV7p4hU14Sc9muz" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/usfQ8tNH1Z2t15JQkPuS" alt=""><figcaption><p><a href="https://css-tricks.com/almanac/selectors/m/marker/">https://css-tricks.com/almanac/selectors/m/marker/</a></p></figcaption></figure>

```
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Itaque sequi eaque earum laboriosam.</h3>
<p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
<h3>Laudantium sapiente commodi quidem excepturi!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
```

```
h3 {
  counter-increment: h3;
  display: list-item;
}

h3::marker {
  display: list-item;
  content: "#" counter(h3) " ";
  color: lightsalmon;
  font-weight: bold;
}

body {
  counter-reset: h3;
  line-height: 1.4;
  font-family: system-ui;
  margin: 3rem;
}

```

<figure><img src="/files/JSuU2g9Kqp5aft3sDfEF" alt=""><figcaption><p><a href="https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses">https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses</a></p></figcaption></figure>

```
<div class="test">
<ol>
        <li>number 1</li>
        <li>number 2</li>
        <li>number 3 and some long text that goes on the next line</li>
        <li>number 4</li>
        <li>number 5</li>
        <li>number 6:
            <ol>
                <li>number 1</li>
                <li>number 2</li>
                <li>number 3</li>
                <li>number 4</li>
                <li>number 5</li>
                <li>number 6</li>
            </ol>
        </li>
        <li>number 7</li>
    </ol>
</div>

```

```
.test {
    width: 300px;
    background: #eee;
    padding: 10px;
}
ol {
    counter-reset: list;
    margin: 0;
}

ol > li {
    list-style: none;
    position: relative;
}

ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}
```

<figure><img src="/files/JLt0yK8lBZXB0wQSNu8Q" alt=""><figcaption><p><a href="https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons">https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons</a></p></figcaption></figure>

```
input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
```

```
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learncss.gitbook.io/cssadvand/su-dung-list-style-type-de-tao-icon-dep-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.