JavaScriptのparseInt()のように、文字列込みの数値の文字列を
数値にいい感じで変換するには、TRANSLATE()を使えば実現できる。
けど、ちとめんどくさい。(もっといい方法がありそうだが)
例）「1個」→「1」
┌──────────────────────────────────────┐
│SELECT [文字列],                                                            │
│       CONVERT([int],                                                       │
│               REPLACE(TRANSLATE([文字列],                                  │
│                                 [除外文字],                                │
│                                 REPLICATE(' ', LEN([除外文字]))            │
│                       ),                                                   │
│                       ' ',                                                 │
│                       '')                                                  │
│       ) AS [数値]                                                          │
│    FROM (                                                                  │
│        SELECT [文字列],                                                    │
│               TRANSLATE([文字列],                                          │
│                         '0123456789',                                      │
│                         REPLICATE(' ', 10)) AS [除外文字]                  │
│            FROM (                                                          │
│                VALUES                                                      │
│('1個'),                                                                    │
│('全23セット')                                                              │
│            ) AS [表]([文字列])                                             │
│    ) AS [表]                                                               │
└──────────────────────────────────────┘

console.log()系のメモ。

【出力方法の種類】
console.log(文字列);
console.info(文字列);
console.warn(文字列);   //→△
console.error(文字列);  //→×
console.table(配列);

【プレースメントの種類】
console.log('%s', 文字列);
console.log('%d', 数値);
console.log('%i', 数値);
console.log('%f', 小数);
console.log('%c', CSS);
console.log('%o', オブジェクト)
console.log('%O', オブジェクト)
console.log('%o', URL)
console.log('%O', URL)

┌──────────────────────────────────────┐
│.css {                                                                      │
│    background-color  :中;                                                  │
│}                                                                           │
│.css::before {                                                              │
│    content           :"奥";                                                │
│    background-color  :奥;                                                  │
│}                                                                           │
│.css::after {                                                               │
│    content           :"手前";                                                │
│    background-color  :手前;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
この場合、テキスト的には「奥 中 手前」の順に表示されるのだが
レイヤー的にも以下かと思いきや、以下なのだ
┌──────────┐┌──────────┐
│×┌───┐        ││○┌───┐        │
│  │奥┌───┐    ││  │中┌───┐    │
│  │  │中┌───┐││  │  │奥┌───┐│
│  │  │  │手前  │││  │  │  │手前  ││
└──────────┘└──────────┘

んじゃ、期待する左のようにするにはどうすればよいか？
┌──────────────────────────────────────┐
│.css::before {                                                              │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
「z-index」をマイナスで指定したあげればよい。(::afterでも同じ)

ただ注意点があって、本体(中)の方に「z-index」を指定してはいけない。
┌──────────────────────────────────────┐
│.css {                                                                      │
│    z-index           :2;                                                   │
│}                                                                           │
│.css::before {                                                              │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
こんな感じたよ奥にはいかない。

でも、本体(中)の方に「z-index」を指定したい、という時は、
「z-index」を指定する層を外側に出せばいいようだ。
┌──────────────────────────────────────┐
│.css {                                                                      │
│    z-index           :2;                                                   │
│}                                                                           │
│.css > div {                                                                │
│}                                                                           │
│.css > div::before {                                                        │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
HTML側はこれに伴い「<div class="css"><div></div></div>」みたいに入れ子にする。