css - 如何在 CSS 中反转列表的顺序，删除最后一个值并保持居中？

Question

我正在整理一个[网站模板][1]。

编辑器中的代码是:

<div class="post-meta vcard"><p>
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/" rel="tag">France</a>, 
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/" rel="tag">Paris</a>, 
<a href="http://wordpress-114402-466332.cloudwaysapps.com/france/paris/things-to-do/" rel="tag">Things to Do in Paris</a>
</p></div>

我希望输出只是法国巴黎。我将如何使用 CSS 实现这一目标？假设步骤顺序相反并删除列表中的第一个变量。

Answer 1

棘手的部分是逗号的使用。您可以将鼠标悬停在标签上看到效果。

我使用 flexbox 来显示标签并在 hover 上使用 row-reverse。请记住，元素的实际顺序不会改变，因此当鼠标悬停在屏幕上时，最后一个子项实际上是 flexbox 中的第一个子项。

希望这对您有所帮助。

.container {
  max-width: 400px;
  text-align: center;
}

.tags {
  display: flex;
  justify-content: center;
}

.tags:hover {
  flex-direction: row-reverse;
}

.tags:not(:hover)>span:not(:last-child)::after,
.tags:hover>span:not(:first-child)::after {
  content: ", ";
}

.tags:hover>span:last-child {
  display: none;
}

<div class="container">
  <div><img src="http://via.placeholder.com/350x150"></div>
  <div class="tags">
    <span>France</span><span>Paris</span><span>Things to do in Paris</span>
  </div>
</div>