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

Question

我有这个 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 %> 等)，我会得到这个输入

你如何检查 <%= b.text %> 是否为空并跳过添加 • 所以在那种情况下我会得到 A • B • C仅。

Answer 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>