我想创建如下内容：
我创建了这个例子（https://codepen.io/anon/pen/bvOPGE https://codepen.io/anon/pen/bvOPGE）与 HTML：
<ul>
<li><span>30</span>days</li>
<li><span>24</span>hours</li>
<li><span>60</span>minutes</li>
</ul>
以及以下 CSS：
ul {
list-style: none;
}
ul li {
display: inline-block;
font-size: 12px;
text-align: center;
text-transform: uppercase;
width: 80px;
}
ul li span {
font-size: 32px;
display: block;
}
问题是如何在数字 30、24 和 60 内添加“:”。
我不需要保留ul/li标记。这似乎符合逻辑......
你可以做一个div里面的元素li获取其内容，然后使用:after伪元素:元素之间。您也可以将文本从正常流程中取出position: absolute以便:符合numbers.
ul {
list-style: none;
display: flex;
align-items: center;
}
ul li {
display: flex;
align-items: center;
}
ul li > div {
font-size: 12px;
text-align: center;
text-transform: uppercase;
padding: 0 20px;
position: relative;
}
ul li:not(:last-child):after {
content: ':';
font-size: 30px;
}
ul li span:first-child {
font-size: 60px;
}
ul li span:last-child {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
}
<ul>
<li><div><span>30</span><span>days</span></div></li>
<li><div><span>24</span><span>hours</span></div></li>
<li><div><span>60</span><span>minutes</span></div></li>
</ul>
或者您可以使用 HTML 结构并添加:after伪元素span元素。
ul {
list-style: none;
display: flex;
}
ul li {
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
ul li span {
font-size: 60px;
display: block;
position: relative;
margin: 0 40px;
}
ul li:not(:last-child) span:after {
content: ":";
font-size: 30px;
top: 50%;
margin-left: 40px;
transform: translateY(-50%);
position: absolute;
}
<ul>
<li><span>30</span>days</li>
<li><span>24</span>hours</li>
<li><span>60</span>minutes</li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
