実現したいこと
あるセクションの中に擬似要素を加えることで背景に斜めの線を入れつつ、そのセクション内にある文字にも擬似要素を加え、デザインを付け加えたい。
前提
案件をいただくために、HTMLとSassを使ってポートフォリオを作成しております。
下記URLのサイトを参考にしながら、自分のサイトを作成しています。
section-solutionクラスを実装しようとした際に以下のような問題が発生しました。
「Creative」の左側に擬似要素である黄色い斜めの線を加えようとした時に、section-solutionクラスで作成した擬似要素（背景にある斜めの灰色線）が反映されてしまい、自作した黄色い線が描画されませんでした。
該当のソースコード
html
1 <section class="section appeal ">2 <div class="inner section-inner">3 4 <div class="appeal-title">Service</div>5 <div class="appeal-subtitle">6 コンテンツ企画、WEBサイト制作、システム開発からど動画制作など、<br>app.2は先着的な視点に基づいてあらゆるクリエイティブを制作します。</div>7 8 <div class="appeal-card">9 <div class="appeal-card-title">Web制作において、よくあるプロジェクト課題</div>10 <ul>11 <li class="appeal-text">Web制作の際にどのようにプロジェクトを進行すべきかわからない。</li>12 <li class="appeal-text">海外向けの対応やUI/UXを意識したシステム開発などまで相談したい。</li>13 <li class="appeal-text">会社ホームページとは別に採用に特化したWebサイトを構築したい</li>14 <li class="appeal-text">制作したWebサイトの継続的な運用・改善のためのリソースが欲しい。</li>15 </ul>16 </div>17 </div>18 </section>
Sass
1.section {2 padding-top: 85px;3 padding-bottom: 80px;4 background-color: $clr-offwhite;5 position: relative;6 overflow: hidden;7 margin-bottom: 5.5vw;8 z-index: 0;9 ::before{10 content: "";11 position: absolute; // 配置を調整するために必要12 top: 0; 13 right: 0;14 bottom: 0;15 left: 0;16 clip-path: polygon(10% 0, calc(10% + 400px) 0, 350px 100%,0 100%, 0 calc(100% - 200px));17 background: $clr-bcg;18 z-index: -1;19 20 }21}22 23.section-inner{24 width: 100%;25 padding: 0 8.3vw;26 box-sizing: border-box;27 margin: 0 auto;28}29 30.inner {31 max-width: 1280px;32 margin: 0 auto;33 padding: 0 28px;34 box-sizing: content-box;35 @include mq(sm) {36 padding: 0 15px;37 }38}39 40 41.appeal-title {42 position: relative;43 font-size: 48px;44 text-align: center;45 letter-spacing: .1em;46 font-weight: bold;47 ::after{ //ここを反映させたい48 content: "";49 position: absolute;50 left: 10px; // 程度を調整するために値を変更51 top: 50%; // 要素を上下中央に位置させる52 transform: translateY(-50%) skewX(-20deg); // 上に移動し、斜めに倾ける53 width: 2px; // 適切な大きさに設定54 height: 2px; // 適切な大きさに設定55 background-color: #0bd;56 z-index: 100;57 }58}
試したこと
デベロッパーツールを使用し、擬似用の関係を調べたところ、他のクラスでも擬似要素beforeが追加されていた。
position:relativeを消去したり、z-indexの値を変えてみた。
beforeの擬似要素が子孫要素に反映されることはないという記事を見つけ、何が原因でこのようになっているのかわからくなってしまったので、こちらで相談させていただきました。
補足情報（FW/ツールのバージョンなど）
0 コメント