Chia sẻ code tạo list bài viết - danh mục, liên kết

Code tạo list bài viết dạng boder cạnh nhiều màu :

li a:hover { background-color: #EFEFEF; }

.orange { border-left: 5px solid #F5876E; }

.blue{ border-left: 5px solid #61A8DC; }

.green{ border-left: 5px solid #8EBD40; }

.purple { border-left: 5px solid #988CC3; }

.gold { border-left: 5px solid #D8C86E; }
</style>

<ul>
<li class="orange"><a href="#">Download</a></li>
<li class="blue"><a href="#">Download</a></li>
<li class="green"><a href="#">Download</a></li>
<li class="purple"><a href="#">Download</a></li>
<li class="gold"><a href="#">Download</a></li>
</ul>

Minh họa Code tạo list bài viết dạng boder cạnh nhiều màu :

Code tạo list bài viết dạng Ascii mũi tên màu xanh :

<div id="vietthuequangcao">
<ul>
<li>
<a href="https://dumuckythuatso.blogspot.com/2021/01/gia-cong-go-oem-thot-go-khay-go-do-choi-thanh-rut-go-ban-ghe-cafe-ban-ghe-hoc-sinh-giuong-go-cau-thang-go-xu-huong-hop-tac-quoc-te-trong-thoi-dai-cong-nghiep-4.0-N5X2.html">
Gia công gỗ OEM ( thớt gỗ, khay gỗ, đồ chơi thanh rút gỗ, bàn ghế cafe, bàn ghế học sinh, giường gỗ, cầu thang gỗ,... ) Xu hướng hợp tác quốc tế trong thời đại công nghiệp 4.0 </a>
</li>
<li>
<a href="https://dumuckythuatso.blogspot.com/2021/01/bat-mi-bi-quyet-kiem-tien-online-giup-cac-soi-gia-du-muc-ky-thuat-so-thoa-man-dam-me-du-lich-trai-nghiem-kham-pha-the-gioiS8Z8.html">
Bật mí bí quyết kiếm tiền online giúp các sói già du mục kỹ thuật số thoả mãn đam mê du lịch, trải nghiệm & khám phá thế giới. </a>
</li>
<li><a href="https://dumuckythuatso.blogspot.com/2021/01/gia-cong-say-go-rong-cat-ghep-cha-nham-go-tu-nhien-go-cong-nghiep-O5Y8.html">
Gia công sấy gỗ, rong, cắt ghép, chà nhám gỗ tự nhiên, gỗ công nghiệp là gì ?
</a>
</li>

</ul>
</div>

Minh họa list bài viết dạng Ascii mũi tên màu xanh :

Code tạo list bài viết dạng check màu xanh :

Minh họa list check màu xanh :

Link 1
Link 2
Link 3

Code tạo list bài viết dạng image mũi tên :

}
.imglist li a:hover{
color:#0A7CAF;
padding:2px;
-moz-box-shadow: 0px 0px 12px #9e9ea3;
-webkit-box-shadow: 0px 0px 12px #9e9ea3;
box-shadow: 0px 0px 12px #9e9ea3;
border:none 0px #000000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* End css list style with arrow images -------------- */
</style>


<p><strong> 〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇</a></strong></p>
<div class="imglist">
<ul>
<li><a href="#">Link số 1</a></li>
<li><a href="#">Link số 2</a></li>
<li><a href="#">Link số 3</a></li>

</ul>
</div>

Minh họa code tạo list bài viết dạng image mũi tên :

〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇

Code tạo list bài viết dạng số thứ tự :

}
.numberlist ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;

}
.numberlist ol ol{
margin: 0 0 0 2em;
}

.numberlist a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #FFF;
color: #444;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
}

.numberlist a:hover{
background: #cbe7f8;
text-decoration:underline;
}
.numberlist a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
color:#FFF;
}

/* End css list with numeber circle background -------------- */
</style>

<p><strong> 〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇</a></strong></p>
<div class="numberlist">
<ol>
<li><a href="#">Liên kết số 1</a></li>
<li><a href="#">Liên kết số 2</a></li>
<li><a href="#">Liên kết số 3</a></li>
</ol>
</div>

Minh họa Code tạo list bài viết dạng số thứ tự :

〇○°.:1 ᖰᖺú♈ ᕍàﬡᖺ ᑕᖺᗢ ᖳᘮảﬡᘐ ᙅáᗢ:.°○〇

Tham khảo :

https://freshdesignweb.com/css-list-style-example
http://www.jquery2dotnet.com/2013/02/windows-8-style-download-link-css.html
https://www.artishock.net/coding/css-list-styling-using-ascii-special-characters
https://www.geeksforgeeks.org/how-to-decorate-list-bullets-in-arrow-using-css
https://web.dev/css-marker-pseudo-element/

Từ khóa tìm kiếm : list bullets in arrow using CSS | list bài viết - danh mục, liên kết