前の内容に基づいてHTMLスパン要素の位置を調整する

Question

これは私が処理しようとしている問題です。

• 私は、販売する商品のオリジナルとプロモーション価格を表示する必要があります。
• いくつかの項目は任意の価格設定を持っていないかもしれません - ので、何もすべて
• いくつかのアイテムは価格が、ノープロモーション価格
• アイテムは、必要に応じて価格

そこの彼らの単位を示すことだけである可能性がありますで示されなかっます価格であり、価格がある場合にのみ、価格設定通貨と、利用可能な場合は価格単位を追加したいと考えています。これは最高の私が最初のものは、単にフルとプロモーション価格を示し、ここで二つの例

1. を持って

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

   以下の例を見ることで理解されています。ここには問題はありません。

2. もう一つはこの後者の例では、問題を示す完全かつ通貨とともに、プロモーション価格と価格

の単位を示します。追加のユーロ/ボックス文字列があると、私の条件付きCSSルール:not(:empty)::beforeは、表示されるコンテンツを表示するために絶対配置されたbefore疑似要素をキックする場合があります。当然のことながら、次のスパン（プロモーション価格）はこのpseduo要素について何も知らず、ユーロ/ボックスビットの下にあります。

私はここでやり遂げた方法を捨てることができます。複数のネストされたスパンを使用して、JSのスポットを使って、すべてのものが常にうまく機能するようにします。しかし、ここではより洗練されたCSSのみのソリューションが必要だと思うのを助けることはできません。私は、ここの誰かがその解決策を提案できると思っています。擬似：@UIDeveloper
で述べたように、あなただけの:afterを使用し、要素の後に属性の値を表示したい場合はposition: absoluteを使用して

Answer 1

は、上書きされたテキストを作成します。

アクセシビリティについての注意：（おそらくSOの質問に対して可能な限り短いコードを使用できるようにその部分を削除してください）、両方の価格はブラインドスクリーンリーダーのユーザーに読み取られます。彼らは最初のものが打たれたことを知りません。<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>

：それを避けるために、あなただけの（すでになどWP、Drupalは、ブートストラップ、で見つかった .visually-hidden/ .element-invisible/ .sr-onlyようなクラスで）スクリーンリーダーによって知覚できるでしょうスパンと説明テキストを追加することができます

---

バリエーション：フレキシボックスは-reverseを付加することによって（トップへ、また下）右から左へフレックス項目を表示することを可能にする：flex-direction: row-reverse（これは疑似要素がフレックス項目とみなされるために機能します）。

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

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