CSS 疑似要素　afterを反映させたい

前提・実現したいこと

初めて質問させていただきます。
現在CSSをYouTubeの動画で勉強しているものです。
divタグに疑似要素のafterをつけて文字を表示したいのですが、うまくいきません。
原因がわかる方いらっしゃいましたら教えていただけると幸いです。

発生している問題・エラーメッセージ

疑似要素が反映されない。

該当のソースコード

CSS
1body{
2	font-size: 1.2em;
3	font-family: sans-serif;
4	width: 80%;
5	margin: 0 auto;
6}
7
8div{
9	height: 25em;
10	margin-top: 2em;
11	position: relative;
12}
13
14div::after {
15	content: "DIVの後ろの文字ですよ！"
16	font-size: 2em;
17	position: absolute;
18	top: 42%;
19	left: 25%;
20	z-index: -1;
21}
22
23/* 色の指定　*/
24div{
25	background-color: rgba(255,255,127,.2);
26}
27
28

HTML
1<!DOCTYPE html>
2	<html>
3	<head>
4		<meta charset="utf-8">
5		<title>色の指定方法についての練習</title>
6		<link rel="stylesheet" type="text/css" href="3-3.css">
7	</head>
8	<body>
9		<h1>Color Values</h1>
10		<div></div>
11	</body>
12	</html>

試したこと

インターネットで出てきた疑似要素のafterが反映されないときの問題点は一通り試したつもりです。
タグやセレクタは基本文字の色が変わるのですが、::afterは文字が白のままなので、疑似要素として認識されていないのではないのではと考えています。(専門用語等まだわからないことが多く視覚的な説明になってしまい申し訳ありません。)

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1    content: "DIVの後ろの文字ですよ！"

セミコロン;がありません。

投稿2021/12/12 07:40

itagagaki

総合スコア8402

mugi.__.cha

2021/12/12 08:09

完全に見落としていました。ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！