scssの疑似クラスが効かない

Question

現在、はにわマンさんの模擬サイトをscssとhtmlを使って模写をしています。
そこで下記の写真の一枚目の「予約受付時間 10:00~19:30」となっているところを疑似クラスのafterを用いて赤い文字で「日祝 休診」という文字付け足したいのですが上手くいきません。
何が問題なのか教えて頂けませんでしょうか？宜しくお願い致します。

<header>
    <img src="photo/siteTitle.png" alt="サイトのタイトルです。">
    <div class="head-container">
      <p>“地域に根付いた歯科医院” デンタル クリニック</p>
      <p>03-0000-0000</p>
      <p>予約受付時間 10:00～19:30 </p>
    </div>
    <nav>
      <button><p>トップページ</p><p class="btn-text">HOME</p></button>
      <button><p>医院紹介</p><p class="btn-text">CLINIC</p></button>
      <button><p>診療案内</p><p class="btn-text">SERVICE</p></button>
      <button><p>医院・スタッフ紹介</p><p class="btn-text">STAFF</p></button>
      <button><p>アクセス</p><p class="btn-text">ACCESS</p></button>     
    </nav>
  </header>

header{
 border-top:solid 8px #6CC6C4;
 img{
   display: block;
   margin: 0 auto;
 }
 .head-container{
   text-align: center;
   p:nth-of-type(1){
     font-size: 10px;
     margin: 0;
   }
   p:nth-of-type(2){
     font-size: 30px;
     margin: 0 ;
   }
   p:nth-of-type(3){
     display: inline-block;
     font-size: 10px;
     margin: 0 0 15px;
     padding: 0 15px ;
     border: solid 1px rgba(0,0,0,0.3);
     line-height: 30px;   
    &:after{
      content:日祝 休診;
    }
    }
  }
  nav{
   display: flex;
   flex-wrap: wrap;
   height: 225px;
   button{
     display:block;
     width: 50%;
     height: 33%;
     background-color: rgb(153, 225, 223);
     border-radius: 5px;
     border-right:#71C9C7 solid 1px ;
     border-left:#99E1DF solid 1px ;
     border-top: 0;
        
    }
    p{
      font-weight: bold;
      color: white;
      margin: 0;
    }
    .btn-text{
      font-size: 10px;
      margin-top: 0;
    }
  }
}

Comments

[kei344]

質問タイトルが「suss」になっていますよ。

[augsup]

ご指摘ありがとうございます！

[kei344]

質問文は編集できますよ。

[augsup]

編集しました！

Answer 1

こちらで解決できると思います。「日祝 休診」の文字を「"」で囲ってください。

p:nth-of-type(3) {
  &::after {
    content: "日祝 休診";
    color: #f00; /* 好きな色にしてください */
  }
}

---

ただmaisumakunさんのご指摘の通り、情報として重要なものはCSS側に書くべきではありません。HTML側に書くべきです。

<div class="head-container">
  <p>“地域に根付いた歯科医院” デンタル クリニック</p>
  <p>03-0000-0000</p>
  <p>予約受付時間 10:00～19:30 <span class="text-red">日祝 休診</span></p>
</div>

.text-red {
  color: #f00; /* 好きな色にしてください */
}

Comments

[augsup]

ご回答ありがとうございます！
「"」で囲むのを忘れていたんですね！
maisumakunさんも仰られている通りafterタグの使い方としては好ましくないということですね。
ご丁寧に修正後のコードまで書いていただきありがとうございます！！

Answer 2

疑似クラスのafterを用いて赤い文字で「日祝 休診」という文字付け足したいのですが

そもそも論ですが、「日祝 休診」のような重要な情報を:afterに任せるという構造そのものが良くないと考えます。

:afterはCSSにあるように、あくまで装飾です。「装飾用になにか出現させる必要がある」、「<q>や<blockquote>に出現させる引用符」のような、「なくても意味が通る」場面で使うべきもの、と考えます。

Comments

[augsup]

ご回答ありがとうございます！
なるほど！afterは装飾する時のみということですね！
勉強になりました。ありがとうございます！！