<div class="box">
<h2>Add span element</h2>
<ul>
<li><span>🐜</span>Item1</li>
<li><span>🦅</span>Item2</li>
<li><span>🐞</span>Item3</li>
<li><span>🦋</span>Item4</li>
<li><span>🐿</span>Item5</li>
</ul>
</div>
<div class="box">
<h2>data-* attributes and pseudo element</h2>
<ul>
<li data-emoji="🐜">Item1</li>
<li data-emoji="🦅">Item2</li>
<li data-emoji="🐞">Item3</li>
<li data-emoji="🦋">Item4</li>
<li data-emoji="🐿">Item5</li>
</ul>
</div>
<div class="box">
<h2>pseudo element</h2>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: flex-start;
padding: 2vw;
}
.box {
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0,0,0,.15);
min-width: 20vw;
h2 {
text-align: center;
border-bottom: 1px solid #eee;
padding: 10px 15px;
font-size: 1rem;
}
li {
list-style: none;
padding: 10px 20px;
&:nth-child(even) {
background-color: #efeefe;
}
}
}
.box:nth-child(1) span {
font-size: 1.5em;
margin-right: 5px;
}
.box:nth-child(2) li::before {
content: attr(data-emoji);
display: inline-block;
font-size: 1.5em;
margin-right: 5px;
}
$emojis: 🐜,🦅,🐞,🦋,🐿;
.box:nth-child(3) {
@for $i from 1 through length($emojis) {
li:nth-child(#{$i})::before {
content:"#{nth($emojis, $i)}";
display: inline-block;
font-size: 1.5em;
margin-right: 5px;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.