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

HTML
CSS
文字化け
疑似要素

Posted at 2024-05-22

困ったこと

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年

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up