Dawn 編集画面のカスタムCSSにエラー

日本語 ディスカッション 技術的なQ＆A
1

Dawnテーマでショップを作成しており、編集画面の「カスタムliquid」にてオリジナルのタイトルを作成したいと思いますが、「カスタムCSS」にコードを追加したら、添付画像のように、エラーが発生し、公開できない状況になっています。何回か試してみましたが、結局CSS中の「content: “”;」部分がエラーの原因だったみたいです。

解決方法をお伺いしたく、投稿させていただきました。

ご存知の方教えていただけますか？

宜しくお願い致します。

画像１.png
画像１.png2074×476 39.6 KB

書いたコード：

liquid部分：
<h2>〇〇〇〇〇</h2>

CSS部分：
h2 {
  display: block;
  position: relative;
} 
h2::after {
  content: "";
  position: absolute;
  width: 50px;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: #008060;
}
2

私の方でも確認してみましたが、たしかにcontentプロパティがあると保存できませんでした。

カスタムCSSは使用できるCSSに制限があるので、おそらくcontentプロパティは使用できないのだと思います。(使用できないCSSに関する公式の情報を調べましたが見つけられませんでした)

contentプロパティが使えない以上、after疑似要素以外で実現するのがよいと思います。

特殊なケースでなければ、疑似要素を使わなくても解決できると思いますので。

1 Like
3

Ogasawarakyoheiさま

ご教示いただきありがとうございます。

CSSに制限があることは知りませんでした。他の方法で試してみます。

貴重な時間をいただき本当にありがとうございました。