Q&A
当方の環境では両方とも表示されました。
擬似要素beforeは表示されるのですが、擬似要素afterが表示されません。
うまくいかない箇所はhtmlファイルの一番下側にあるcatchクラスとcssファイルの一番下になります。
contentには全角の空白を入れました。
試したこと
afterの後のセミコロンを一つ減らしてみたが解決しませんでした。なぜかbeforeはうまく表示されるので、記述の仕方をbeforeに合わせることはしました。
ここに言語を入力 html コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="linguage.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <header> <p>安いのにしっかり上達する英会話教室・英会話リンゲージ</p> <div class="header-contents"> <a href="https://www.linguage-school.jp/"><img src="logo.png" alt=""></a> <div class="intro"> <div class="intro-contents"> <img src="tel-mark.png" alt=""> <p class="tell">0120-965-680</p> <p>火〜木7:00/土11:00〜19:00</p> <p>※スクールにより受付時間が異なります。</p> </div> <a href="https://www.linguage-school.jp/entry/trial/">まずは気軽に無料体験</a> </div> </div> </header> <div class="back"> <img src="main-text.png" alt=""> <img src="main-person-pc.png" alt=""> </div> <div >※1 コースにより受講料金がことなります</div> <div class="join"> <img src="lp-camp202010-sp.png" alt=""> <p>最大3ヶ月分の受講料が無料になるキャンペーン 【キャンペーン内容】<br> 10月31日までのキャンペーン期間中に初めて入会される受講生に限り<br> 最大3ヶ月分の受講料が無料になるほか、対面レッスン・オンラインレッスン振り替えも最大 3 ヶ月分無料。<br> さらに最長1年間オンライン教材無料！<br> 3大特典が付くリンゲージのGo to studyキャンペーンは、入会のお申込み日が早いほどお得です。 ※キャンペーン適用には条件がございます。</p> </div> <div class="colona-support-out"> <h3>安心してレッスンを受けていただくための取り組み</h3> <p>英会話リンゲージでは、今後もお客様に安心してレッスンを受けて頂くため、 以下の対応を強化して参ります。</p> <div class="colona-support-in"> <div> <img src="avoid01.png" alt=""> <p>マスクの着用</p> </div> <div> <img src="avoid03.png" alt=""> <p>室内換気の徹底</p> </div> <div> <img src="avoid02.png" alt=""> <p>飛沫防止アクリル板</p> </div> <div> <img src="avoid04.png" alt=""> <p>体調確認のご協力</p> </div> <div> <img src="avoid05.png" alt=""> <p>手洗い・消毒の徹底</p> </div> <div> <img src="avoid06.png" alt=""> <p>教室内の消毒清掃</p> </div> </div> </div> <div class="description"> <div class="description-item1"> <img src="icon-lead03.png" alt=""> <p class="description-ttl"> 支払いラクラク！</p> <p class="description-txt"><span>完全月謝制</span> （月12,000円～/グループレッスン最大5名） いつでも入会金0円！</p> <p><span> 初期費用が安い！</span> 一度にまとめて支払う金額を抑えられるので、始めやすく続けやすい！</p> </div> <div class="description-item1 description-item2"> <img src="icon-lead01.png" alt=""> <p class="description-ttl">駅からすぐ！</p> <p class="description-txt">新宿/銀座・有楽町 <br> 東京・八重洲 横浜/みなとみらい/川崎</p> <p>どの教室も最寄りのターミナル駅から徒歩<span> 5分以内。</span> <span> 駅チカ</span>だから 便利で通いやすい！</p> </div> <div class="description-item1"> <img src="icon-lead02.png" alt=""> <p class="description-ttl">早朝から夜までOK</p> <p class="description-txt">開校時間は <span>早朝7時</span> から<br><span>夜22時</span>まで </p> <p>会社に行く前や残業後も レッスン可能。 忙しくても<span> 続けやすい！</span> <span class="description-span"> ※教室によって開校時間は異なります</span> </p> </div> </div> <div class="anxiety"> <div class="container"> <ul> <li>家計に負担になるのは困るから <br> <span>レッスン代は安くないと。</span> </li> <li>仕事もプライベートも忙しいから<br> 自分の<span> 都合のいい時間</span>にレッスンを受けたい。</li> <li>全く英語が話せないけど<br><span>ついていける</span> かな</li> <li>初期費用が高いと大変<br> <span>格安で始められる英会話がいい。</span> </li> <li>通うのが大変だと挫折しそう<br> <span>駅チカなスクールがいい。</span> </li> <li>身につかないと意味がないから<br> <span>安くても高品質な英会話教室がいい。</span> </li> </ul> </div> </div> <div class="section-reason"> <p class="catch">そんな私でも<span>大丈夫！</span></p> <h2>英会話スクールリンゲージが選ばれる<span>3</span><span>つ</span>の理由！</h2> </div> </body> </html>
css コード header{width:100%; top:0; } header p{background-color: #eee; margin:0; font-size:12px;} .back{background-image:url("bg-cover-pc.jpg");} .intro{display:inline-block; position:absolute; left:900px;} .tell{display:inline-block; font-size:30px; color:#888; margin:0;} .intro-contents{display: inline-block;} .header-contents{position:relative; height:150px;} /* オンライン教材の説明 */ .join{text-align:center; display:inline-block; width:100%;} .colona-support-in{ display:flex; flex-wrap: wrap; justify-content: center; } .colona-support-out{text-align:center; border:1px solid black; position: relative;} .colona-support-out h3{position:absolute; top: -33px; left: 500px; background-color: white;} .description{background-color:#EEEEEE; height:300px; text-align:center; } .description-item1{display:inline-block; width:30%; background-color:white;} .description-item2{margin:0 20px;} .description-ttl{font-weight:bold; font-size:20px;} .description-txt{font-weight:bold;} .description-item1 span{color:#ff5089;} .description-span{font-size:11px;} .anxiety{background:url("bg-problem.png"); background-position:center; background-repeat:no-repeat ; height:400px; margin-top:40px; background-color:#EEEEEE;} ul{list-style:none} li span{color:#ff5089; font-size:24px;} .anxiety li{padding:10px 20px; display:inline-block; } .anxiety li:first-child{position:absolute; left:90px; top:30px;} .anxiety li:nth-child(2){position:absolute; left:30px; top:150px;} .anxiety li:nth-child(3){position:absolute; left:90px; top:270px; } .anxiety li:nth-child(4){position:absolute; top:30px; left: 650px;} .anxiety li:nth-child(5){top:150px; } .anxiety li:nth-child(6){display:none; top:270px; } .container{margin:0 auto; width:80%; position:relative;} .section-reason p,.section-reason h2{text-align:center;} .catch::before{content:' '; background-image:url("cheer-d_l.png");} .catch::after{content:' '; background-image:url("cheer-d_r.png");}
ありがとうございます。他のプラウザでも試しましたが擬似要素afterの要素はきちんと配置されているのですが、画像が表示されないです。
そうですか。
もしかしたら、cheer-d_r.png というファイルがないのかもしれませんね。
ご提示のコードでサンプルを作りました
https://jsfiddle.net/Lhankor_Mhy/b40tyaz2/
こちらのページでも、after の背景画像は表示されていないですか？
他の画像に差し替えたら、表示されました。画像の大きさの関係で白い余白のところだけしか入っていないのが分かりました。
ご解決されて何よりです。
BAの選出をお願いします。
回答1件
0
ベストアンサー
afterに指定しているcheer-d_r.pngが存在しないのではないでしょうか？
試しに画像を別のものに差し替えて表示してみましたが、表示されました。
https://codepen.io/aki0923f/pen/pobNpvP
ちなみに、before・afterは
- display: inline-block;
- widthプロパティ
- heightプロパティ
を指定すると、content: ' ';としなくてもcontent: '';で背景画像が表示されるようになります。
投稿2020/10/22 10:04
総合スコア84
コードの書き方教えていただきありがとうございます。
他の画像に差し替えたところ、画像が表示されました。画像の大きさの関係で白い余白のところだけしか入っていないのが分かりました。他の画像で試してみることを次からしようと思います。
あなたの回答
tips
プレビュー
