hoverで別のところが動くように設定したい

前提・実現したいこと

現在hoverで疑似要素をアニメーションさせるところまでうまくいっております。
がもう少し変化させて本来と違うところにマウスが乗っているときにhoverが動いてくれるようなコードを考えています。

現状の単純にhoverで動く成功しているコードを記載しておきます

html
1<!DOCTYPE html>
2<head>
3<meta charset="UTF-8">
4<link rel="stylesheet" href="stylecss.css">
5</head>
6<html>
7<body>
8     <main>
9          <p>サンプル１</p>
10          <p>サンプル２</p>
11     </main>
12</body>        
13</html>

css
1*{
2    padding: 0;
3    margin: 0;
4}
5p, {
6    font-size: 50px;
7    text-align: center;
8}
9
10main{
11    height:1000px;
12}
13p::after, p::before{
14   content:"";
15   background-image: url(images/2color-border.png);
16   display: inline-block;
17   width: 0px;
18   height: 40px;
19   background-position-y: 20px;
20   background-repeat: no-repeat;
21
22transition-property: width;
23transition-duration: 0.5s;
24}
25p:hover::after, p:hover::before{
26 
27 width: 800px;
28}

上記のコードでは<p>にマウスが乗った時に<p>の左右にbackgroundimageが動くコードです。
画像で差し込んでいる画像（2色の線）がびよーんと800pxまで左右に伸びます。
（水平線みたいな役割の線だとイメージしていただければいいかなと思います）
で<p>に載っているときだけでなくもっと大きなボックスに載っているときにも反応してほしいと考えるようになりました。
で、html上記のコードで<main>に載っているときに反応してくれればと思いコードを色々書き換えたり練習しております。
がうまくいかず無反応で困っております。

試したこと

ググってみたら参考になりそうなサイトはありましたhttps://techacademy.jp/magazine/19418
が自分が書くとうまくいかずきっと何かが違うんだろうなという結果になっています。（何が違うのかは検証したりしてますがわからない状態に陥っています。）

###どうコードを変えたのか
cssで下方部分の変更を行ってみました
『p:hover::after, p:hover::before』この部分を『main:hover + p::before, main:hover + p::after 』にしてみました
mainにhoverしたときｐの疑似要素が変わると書いたつもりです。
###結果書いたcss

css
1*{
2    padding: 0;
3    margin: 0;
4}
5p, {
6    font-size: 50px;
7    text-align: center;
8}
9
10main{
11    height:1000px;
12}
13p::after, p::before{
14   content:"";
15   background-image: url(images/2color-border.png);
16   display: inline-block;
17   width: 0px;
18   height: 40px;
19   background-position-y: 20px;
20   background-repeat: no-repeat;
21
22transition-property: width;
23transition-duration: 0.5s;
24}
25main:hover + p::before, main:hover + p::after {　　　/*変更した部分*/
26
27 width: 800px;
28}

変更したcssコードではなぜダメなのでしょうか？
お忙しいと思いますが宜しくお願いいたします。

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

回答2件

+ は隣接した兄弟要素（次の要素）を指定します。

隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

子要素を指定したい場合は、>を使ってください。

子結合子 - CSS: カスケーディングスタイルシート | MDN

css
1main:hover > p::before, main:hover > p::after {
2  width: 800px;
3}

投稿2020/10/03 16:37

hatena19

総合スコア33782

eio

2020/10/03 16:57 編集

回答ありがとうございます。回答いただいた通りにしたら動きました。 <main>に乗ったら動いています。ただ同時に動きも変化してしまいました。当初は<p>を中心に左右に伸びてたのですが::beforeで差し込んでいたところ::afterで差し込んでいたところ同じ左から右に向かって画像が伸びるようになってしまいました。プロパティを変更したら向きが変わってしまうのはなぜなんでしょうか？ beforeで差し込んでいたところは右から左に画像が伸びていたのですが左から右に画像が伸びる方向が変わってしまいました。

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

ベストアンサー

駄目な理由は上記のhtmlの構成で
隣接セレクタである + を使っているからです。
この場合は直下セレクタである > を使えば上手くいきます。

わかりやすいようにmainの色を変更。
疑似要素のbackground-imageをbackground-colorに変更しています。

各種セレクタの説明
https://techacademy.jp/magazine/26720

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        * {
10            padding: 0;
11            margin: 0;
12        }
13
14        p {
15            font-size: 50px;
16            text-align: center;
17        }
18
19        main {
20            height: 1000px;
21            background-color: pink;
22        }
23
24        p::after,
25        p::before {
26            content: "";
27            display: inline-block;
28            width: 0px;
29            height: 40px;
30            background-color: green;
31            background-position-y: 20px;
32            background-repeat: no-repeat;
33
34            transition-property: width;
35            transition-duration: 0.5s;
36        }
37
38        main:hover>p::after,
39        main:hover>p::before {
40            width: 800px;
41        }
42
43    </style>
44</head>
45
46<body>
47    <main>
48        <p>サンプル１</p>
49        <p>サンプル２</p>
50    </main>
51</body>
52
53</html>

投稿2020/10/03 16:56

Jon_do

総合スコア1373

eio

2020/10/03 17:09

回答ありがとうございます。ちょうど他の方も同じ回答を頂いていたところでテストしてみたところでした。『＞』に変更したら確かに動きました。と同時に新たな疑問も発生してきました。 Jon_do様に書いていただいたコードを貼ってテストしてみたら理想的な動きしてました。で自分が書いたコードを変更したら… なぜかbeforeの部分が右から左には動かず左から右に動くようになってしまいました。プロパティしか変更してないのになぜか動きの向きが変更になってしまいました。 ::after側は左から右＜ｐ＞から離れるような方向で問題なしです。補足で修正したコードを貼っておきます。なにかしら変な部分があったら教えていただけると助かります。