<ul>
<li><span class=icon>🚲</span> Bicycles</li>
<li><span class=icon>✈️</span> Planes</li>
<li><span class=icon>🚂</span> Trains</li>
</ul>
<ul>
<li><span class=icon>📥</span> Inbox</li>
<li><span class=icon>📤</span> Outbox</li>
<li><span class=icon>📁</span> Folder</li>
</ul>
.icon {
color: transparent;
text-shadow: 0 0 #ec2930;
}
ul {
list-style: none;
font: 20pt "crimson text";
display: inline-block;
padding: 40px;
height: auto;
width: max-content;
width: -moz-max-content;
width: -webkit-max-content;
color: #444;
background-color: #f1ec37;
box-shadow: 0 0 2px lightpink;
text-align: left;
margin: 10px 0 0 0;
}
ul:first-child {
margin-right: 30px;
}
li {
white-space: pre;
margin-bottom: 6px;
}
body {
text-align: center;
}
@supports not ((width: -moz-max-content) or (width: -webkit-max-content) or (width: max-content)) {
ul {
width: 100px;
}
}
This Pen doesn't use any external JavaScript resources.