html - CSS 在两个 HTML 标签之间放置一个字符，前提是两者都有内容

Question

我的模型中有两个值，其中一个或两个都可以包含一个值。如果两者都包含一个值，我想在 View 中在它们之间加上破折号。因此，使用 span 标签作为属性的容器，输出的 HTML 将是

<span>First</span><span></span>
<span></span><span>Second</span>
<span>First</span>-<span>Second</span>

我可以查看模型，但我想知道仅使用 HTML/CSS 是否可行。我试过使用 before 和 after CSS 命令来插入破折号，但它没有完成这项工作。

如果可能，有什么想法吗？如果可能的话，怎么做？

Answer 1

CSS 不支持在元素之前或之后插入生成的内容，因此对此的纯粹解决方案并不简单。

如果您的 span 需要内联，或者如果您不能修改 HTML(例如破折号必须出现在两个 span 之间)，您最好将此逻辑移交给 JavaScript 或 View 模型(或者我猜两者，如果您使用的是 JavaScript MVVM 框架)。

如果不是，并且您不介意作弊和/或完全破坏 HTML 的语义，将破折号放在前两个之后的第三个范围内，您可以使用 span:not( :empty) + span:not(:empty) + span 否则隐藏它。

或者，根据您的布局方式，您可以通过其他方式作弊。例如，如果将破折号放在您的跨度之一是一个选项(例如，因为跨度没有任何特殊格式)，它就像

一样简单

span:not(:empty) + span:not(:empty)::before { content: '-'; }

不过，无论是哪种情况，我怀疑只要在 View 模型中公开一个单独的属性，您总是会更轻松一些。