如何在跨度后有条件地添加文本，仅当跨度文本不为空时答案

【问题标题】：How to add text after span conditionally, only if span text is not empty如何在跨度后有条件地添加文本，仅当跨度文本不为空时
【发布时间】：2019-08-05 15:28:52
【问题描述】：

我有这个 HTML：

<span class="footer-nav-item" data-target="a-section">A</span> •
<span class="footer-nav-item" data-target="b-section"><%= b.text %></span> •
<span class="footer-nav-item" data-target="c-section"><%= c.text %></span> •
<span class="footer-nav-item" data-target="d-section"><%= d.text %></span> •
<span class="footer-nav-item" data-target="e-section"><%= e.menu %></span>

如果我的任何参数（webpack 变量）为空（<%= b.text %>、<%= c.text %> 等），我就有这个输入

您将如何检查是否为空并跳过添加 • 所以在这种情况下我只会得到 A • B • C。

【问题讨论】：

解决此问题的最佳方法是，如果变量为空，则不要放入点。我不知道你是如何使用 webpack 做到这一点的，但我已经添加了标签，以便让该技术的专家解决这个问题。

标签： html css webpack

【解决方案1】：

将点设为伪元素，可以考虑:empty选择器：

.footer-nav-item:not(:empty):not(:last-child):after {
  content:" • ";
}

<div>
  <span class="footer-nav-item" data-target="a-section">A</span>
  <span class="footer-nav-item" data-target="b-section">B</span>
  <span class="footer-nav-item" data-target="c-section"></span>
  <span class="footer-nav-item" data-target="d-section">D</span>
  <span class="footer-nav-item" data-target="e-section">E</span>
</div>

【讨论】：

最后一个怎么修改？
@sreginogemoh 你的意思是你还想在最后一个点后面加一个点？

【解决方案2】：

如果是关于 html 和 css，那么点应该通过 CSS 生成或包含在标签中以便通过 CSS 访问。

示例：

span+span:before {
  content: ' • ';
 /* your own style from here , padding, margin, color, ... */
}

span:empty {
  display: none;
}
/* show me what's behind the empty span */
span:empty + span {color:green;}

<span class="footer-nav-item" data-target="a-section">A</span>
<span class="footer-nav-item" data-target="b-section"><%= b.text %></span>
<span class="footer-nav-item" data-target="c-section"><%= c.text %></span>
<span class="footer-nav-item"><!-- looks like i'm empty --></span>
<span class="footer-nav-item" data-target="d-section"><%= d.text %></span>
<span class="footer-nav-item" data-target="e-section"><%= e.menu %></span>

如果最后一个点也要显示

span:after {
  content: ' • ';
 /* your own style from here , padding, margin, color, ... */
}

span:empty {
  display: none;
}

/* show me what's behind the empty span */
span:empty + span {color:green;}

<span class="footer-nav-item" data-target="a-section">A</span>
<span class="footer-nav-item" data-target="b-section"><%= b.text %></span>
<span class="footer-nav-item" data-target="c-section"><%= c.text %></span>
<span class="footer-nav-item" data-target="d-section"><%= d.text %></span>
<span class="footer-nav-item"><!-- looks like i'm empty --></span>
<span class="footer-nav-item" data-target="e-section"><%= e.menu %></span>
<span class="footer-nav-item"><!-- looks like i'm empty --></span>

【讨论】：

这看起来不错，但是当我悬停时，点会变成a href 的一部分，有什么办法可以避免这种情况吗？
@sreginogemoh 你的样本没有显示任何标签，我应该如何理解你告诉我的内容？你能澄清一下，所以我可以提供进一步的帮助。如果您的 <%= d.text %> 打算生成一个链接，那么更新我的 css 选择器生成伪 span:before a ，那么如果没有指向它的链接，则 :empty 选择器是无用的。请澄清一下，这样我就可以做出一个干净的答案或删除这个可能没用的答案。