根据先前的内容调整 HTML span 元素的位置答案

【问题标题】：Adjusting the position of an HTML span element based on prior content根据先前的内容调整 HTML span 元素的位置
【发布时间】：2017-10-09 09:46:21
【问题描述】：

这是我要解决的问题。

我需要出示特价商品的原价和促销价。
某些商品可能没有任何定价 - 因此根本不会显示任何内容
有些商品可能只标明价格但没有促销价
商品可以选择标明其价格单位

当有价格时 - 并且只有当有价格时，我才想附加定价货币和价格单位（如果有）。通过查看下面的示例可以最好地理解这一点

#spnOldPrice{text-decoration:line-through;}
#spnNewPrice{color:red !important;}
.pricing{position:relative;}
.pricing:not(:empty)::before
{
 position:absolute;
 left:100%;
 content:attr(data-label);
}

<span id='spnOldPrice'><span id='plainoldPrice' class='pricing'>9.99</span></span>
<span id='spnNewPrice'><span id='plainnewPrice' class='pricing'>4.99</span></span>
<hr>
<span id='spnOldPrice'><span id='oldPrice' class='pricing' data-label='€/box'>9.99</span></span>
<span id='spnNewPrice'><span id='newPrice' class='pricing' data-label='€/box'>4.99</span></span>

这里有两个例子

第一个仅表示完整和促销价格。这里没有问题。
第二个表示完整价格和促销价格以及货币和价格单位

后一个例子说明了这个问题。附加 €/box 字符串的存在导致我的条件 CSS 规则 :not(:empty)::before 启动，在这种情况下，绝对定位的 before 伪元素显示可见内容。自然，下面的跨度 - 促销价格 - 对这个伪元素一无所知，并在 €/box 位下绘制自己。

我可以抛弃我在这里做事的方式，使用多个嵌套跨度并使用一点 JS 来确保一切正常运行。但是，我想知道这里是否有更优雅的纯 CSS 解决方案。

【问题讨论】：

尝试删除 position: absolute;left: 100% from .pricing:not(:empty):before css。
这只是显示货币/单位的效果，例如€/box，在实际价格的左边，这根本不是预期的价格

标签： html css css-position pseudo-element

【解决方案1】：

使用position: absolute 将创建覆盖文本，如@UIDeveloper 所述
如果你想在元素之后显示属性的值，只需使用:after：伪。

关于可访问性的注意事项：（也许您删除了该部分以获得关于 SO 问题的最短代码）两种价格都将被盲人屏幕阅读器用户阅读。他们不会知道第一个被击中。为避免这种情况，您可以添加一个只能由屏幕阅读器感知的跨度（在 WP、Drupal、Bootstrap 等中已经找到类似 .visually-hidden / .element-invisible / .sr-only 的类）和解释性文本： <span class="visually-hidden">Old price</span>

#spnOldPrice{text-decoration:line-through;}
#spnNewPrice{color:red !important;}
/* .pricing{position:relative;} */
.pricing:not(:empty)::after
{
 /*position:absolute;*/
 /*left:100%;*/
 content:attr(data-label);
}

<span id='spnOldPrice'><span id='plainoldPrice' class='pricing'>9.99</span></span>
<span id='spnNewPrice'><span id='plainnewPrice' class='pricing'>4.99</span></span>
<hr>
<span id='spnOldPrice'><span id='oldPrice' class='pricing' data-label='€/box'>9.99</span></span>
<span id='spnNewPrice'><span id='newPrice' class='pricing' data-label='€/box'>4.99</span></span>

变化： flexbox 允许通过附加 -reverse: flex-direction: row-reverse 来从右到左（以及从下到上）显示 flex 项目（因为伪元素被认为是 flex 项目所以有效） .

#spnOldPrice{text-decoration:line-through;}
#spnNewPrice{color:red !important;}
.pricing{
  display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end; /* which is... left-side! */
}
.pricing:not(:empty)::after
{
 content:attr(data-label);
}

<span id='spnOldPrice'><span id='plainoldPrice' class='pricing'>9.99</span></span>
<span id='spnNewPrice'><span id='plainnewPrice' class='pricing'>4.99</span></span>
<hr>
<span id='spnOldPrice'><span id='oldPrice' class='pricing' data-label='€/box'>9.99</span></span>
<span id='spnNewPrice'><span id='newPrice' class='pricing' data-label='€/box'>4.99</span></span>

【讨论】：

我倾向于使用::before 作为习惯问题，因为我想创建以某种方式附加到另一个元素的不寻常布局，并且通常通过绝对定位来根据需要移动::before。显然不需要。作为stated her，after 元素将是其父元素的 last child 并且默认情况下无论如何都会定位到右侧，这正是我在这里需要的。不过，我接受并赞成您的回答，因为我真的很喜欢您的 flexbox 解决方案。

【解决方案2】：

一种更简单的方法是在第二个跨度上添加边距：

#spnOldPrice{text-decoration:line-through;}
#spnNewPrice{color:red !important;}
.pricing{position:relative;}
.pricing:not(:empty)::before
{
 position:absolute;
 left:100%;
 content:attr(data-label);
}
#newPrice{margin-left: 40px;}

<span id='spnOldPrice'><span id='plainoldPrice' class='pricing'>9.99</span></span>
<span id='spnNewPrice'><span id='plainnewPrice' class='pricing'>4.99</span></span>
<hr>
<span id='spnOldPrice'><span id='oldPrice' class='pricing' data-label='€/box'>9.99</span></span>
<span id='spnNewPrice'><span id='newPrice' class='pricing' data-label='€/box'>4.79</span></span>

【讨论】：