列表标记

字符总数: 114 阅读更多...

列表标记

复选标记列表标记

箭头列表标记

表情符号列表标记

角色列表

列表标记

复选标记列表标记

箭头列表标记

表情符号列表标记

Like many other collections here, this one is designed for text decoration. What do we have here? Bullets for stylish list organisation! On this page you will find:

Geometric shapes of various colours and sizes.
Arrows and other direction markers. All pointing to the right.
Big bold checkmarks.
Complex ornaments.
And even your favourite Emojis.

All these little bullets are at your service! You can copy and paste them in textual editors or social media messages. Moreover, they come in handy for web design.

Almost any sign, character, or symbols can be turned into a list bullet. The only condition obligatory is that it must be rendered by fonts. To do this, the pseudo-element ::before is applied to the tag <li>. Let me show you an example.

HTML

<ul class="plan_na_jizn">

<li>First, don't give up and don't give in.</li>

<li>Secondly, love everybody and smile.</li>

<li>Thirdly, find and lose again.</li>

<li>Finally, give up and give in.</li>

</ul>

CSS

/* remove all that was there by default */

.plan_na_jizn { list-style-type: none; }

/* add your own */

.plan_na_jizn li::before { content: "\2765"; }

This 「\2765」 css is the code of the turned heart which is written on its page in the tab 「Technical information」. Now we have it instead of dots.

First, don't give up and don't give in.
Secondly, love everybody and smile.
Thirdly, find and lose again.
Finally, give up and give in.

The party doesn't have to be over with this collection. Check out other collections. Unicode offers a huge variety of symbols that are able to serve the same purpose.

列表标记

目录

列表标记

复选标记列表标记

箭头列表标记

表情符号列表标记

角色列表

列表标记

复选标记列表标记

箭头列表标记

表情符号列表标记

How to make your own list bullet in HTML

参见