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

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FKKNVpSocdwI2DKUiyQtc%2Fimage.png?alt=media&#x26;token=0a3f606e-9bb8-4d73-ab42-4e2ad5c8e95c" 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="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2F47BPmBNnQ2IgcjlOStRz%2Fimage.png?alt=media&#x26;token=9d627731-48e1-4e94-abb0-f369094a49b0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FiouWc5kvbiznNfJxi4K4%2Fimage.png?alt=media&#x26;token=cd646b1f-3403-4ff0-9caa-d3558d8ce25d" 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="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2FecIkK26d1u0UUjo0ymPJ%2Fimage.png?alt=media&#x26;token=36062125-fe98-48cc-bbf4-4fe5b84a6328" 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="https://1655165672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LsqgAqbSGjkO0e50FMT%2Fuploads%2Fcm6nkH6v4kT6GX0nJI0v%2Fimage.png?alt=media&#x26;token=a0387e92-9e96-400b-8854-34646ff7f0e8" 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"/>
```