Tôi có một danh sách mà tôi muốn thêm biểu tượng đánh dấu trước văn bản danh sách. Có CSS nào có thể giúp tôi áp dụng cách này không?
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
Lưu ý: Tôi muốn điều này trong loại mã HTML này
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>Câu trả lời:
Bạn có thể sử dụng phần tử giả để chèn ký tự đó trước mỗi mục danh sách:
ul {
list-style: none;
}
ul li:before {
content: '✓';
}<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>Dưới đây là ba kiểu dấu kiểm khác nhau mà bạn có thể sử dụng:
ul:first-child li:before { content:"\2713\0020"; } /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; } /* OR */
ul:last-child li:before { content:"\2611\0020"; }
ul { list-style-type: none; }<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
<ul><!-- not working on Stack snippet; check fiddle demo -->
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>Người giới thiệu:
Như một phần bổ sung cho giải pháp:
ul li:before {
content: '✓';
}
Bạn có thể sử dụng bất kỳ biểu tượng SVG nào làm nội dung , chẳng hạn như Font Aswesome .
ul {
list-style: none;
padding-left: 0;
}
li {
position: relative;
padding-left: 1.5em; /* space to preserve indentation on wrap */
}
li:before {
content: ''; /* placeholder for the SVG */
position: absolute;
left: 0; /* place the SVG at the start of the padding */
width: 1em;
height: 1em;
background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>Lưu ý: Để giải quyết vấn đề gói mà các câu trả lời khác có:
<li>position: absolute; left: 0)Đây là các biểu tượng màu đen khác của Font Awesome .
Kiểm tra CODEPEN này để xem cách bạn có thể thêm màu và thay đổi kích thước của chúng.
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
bạn có thể sử dụng phong cách css đơn giản này
ul {
list-style-type: '\2713';
}