ワンソースで様々な端末に対応させようとすると本来のタグとは違う表示にしたい欲求にかられます。

WordPressのようなCMS内部で生成されるタグだとプラグインかfunctions.phpへタグの出力をある端末だけ変更するようなコードを書いたりでも対応できたりするけど…
もっと手軽な感じにCSSを駆使するとそれっぽくできたりします。

あちこちで見かけるtableタグのMedia Queriesサンプルなんかみたいに。

あれ<br>それ

と書かれたタグを

あれ, それ

と “<br>” の部分を “, ” と表示させるCSSです。

br {
    content: " ";
}
br:after {
    content: ", ";
}

色々試したらできたので理由は聞かないで欲しい。
MDN: content

content プロパティは、::before 疑似要素及び ::after 疑似要素をその対象

とのことなので
通常タグに設定するモノではなく、
今回はうまくいったとしても将来に渡り表示が保証されたワケで無い。

となってしまいます。

でも br に content: ” “; とするとうまくいくんだよなー
他に良い解決方法をお持ちの方はお教え下さいませ。