Question

我有来自客户的这个奇怪的请求，要从Skype添加一个微笑表情符号作为list-style-type。问题是他也想要动画的表情符号，因为我想使用font-awesome来添加表情符号。

您是否知道是否可以在列表的最后一个孩子上插入带动画的表情符号？

Answer 1

执行此操作的最佳方法是使用背景图像设置::after伪元素的样式。

这是现场演示：

＆＃13;

.list {
    list-style-type: none;
}

.list > li:last-child::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-image: url("https://i.imgur.com/I9ldaCx.png");
}

＆＃13;

<ul class="list">
  <li>Circle type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

＆＃13;

Answer 2

我认为你可以用GIF类型的Skype特殊抽奖笑脸图像来模仿微笑。您需要设置list-style-type: none以隐藏li附近的所有标记，然后只需在文字前添加图片即可。例如：

.list {
    list-style-type: none;
}

.list img {
    width: 20px;
    height: 20px;
}

<ul class="list">
  <li><img src="http://www.robotspacebrain.com/wp-content/uploads/2014/03/David-Szakaly-2.gif">Circle type</li>
  <li><img src="http://www.robotspacebrain.com/wp-content/uploads/2014/03/David-Szakaly-2.gif">Tea</li>
  <li><img src="http://www.robotspacebrain.com/wp-content/uploads/2014/03/David-Szakaly-2.gif">Coca Cola</li>
</ul>

在li标签

2 个答案: