LoginSignup
1
1

【一口メモ】:before :afterなどで指定したcontentが文字化けするときの対処法

Posted at

困ったこと

beforeやafter疑似要素のcontentプロパティで,文字化けするとき(特に日本語)がある。

index.html
<head>
    <!--いろいろ省略-->
	<meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <!--いろいろ省略-->
</head>
<body>
    <div>100</div>
</body>
style.css
div :after {
    content: "年";
}

実行結果例

100蟷エ

解決策

linkタグにcharset="utf-8"を加える。

index.htmlのうち変更部分
    <link rel="stylesheet" href="style.css" charset="utf-8">

実行結果例

100年

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1