みかづきブログ・カスタム

基本的にはちょちょいのほいです。

特殊文字を使って擬似要素(before, after)に半角スペースを設定する 📝

ものすごく特殊な例な気がしますが、擬似要素に半角スペースを設定しようと思い、SCSSで、

p {
  &:before,
  &:after {
    content: ' ';
  }
}

と書いてみたのですがダメでした。

HTMLで文頭、文末に半角スペースを書くのであれば実体参照を使うところなのですが、

p {
  &:before,
  &:after {
    content: ' ';
  }
}

と書いてもダメで、どうしたものかと思っていたのですが、

p {
  &:before,
  &:after {
    content: '\02';
  }
}

と、特殊文字を使ってみたところうまくいきました。

DEMO