> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/su-dung-list-style-type-de-tao-icon-dep-ok.md).

# 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"/>
```