时间戳

首页 > 解决方案 > 如何使用css在最后一个列表项的末尾添加感叹号

css - 如何使用css在最后一个列表项的末尾添加感叹号

问题描述

如何使用css在最后一个列表项的末尾添加感叹号

<ul> 
<li><span>one</span></li> 
<li><span>two</span></li> 
<li><span>three</span></li> 
<li><span>four</span></li> 
<li><span>one</span></li> 
<li><span>two</span></li> 
<li><span>three</span></li> 
<li><span>four</span></li> 
</ul>

标签： cssscss-lint

解决方案

您可以使用下面的代码轻松做到这一点

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li:last-child {
  position: relative;
  display: inline-block;
}

li:last-child::after {
  content: "!";
  position: absolute;
  right: -10px;
}

推荐阅读