:: afterは要素の下に積み重ねません

「最新の作業」作業の下に灰色の垂直線が必要です。私がz-indexを負に設定すると、それは消えますが、私は体の下にあると思いますか？これを望むのは簡単な解決策です。私はモックアップのイメージを添付して、どのように見えるかを示しました。私は＃212121の背景を持つdivを持っているので、コピー "最新の仕事"は上と下のパディングがあり、下に行くように見えます。:: afterは要素の下に積み重ねません

body { 
 
\t font-size: 16px; 
 
\t background: #f9f9f9; 
 
} 
 
.container { 
 
\t max-width: 1600px; 
 
} 
 

 
#dt-lpStatic { 
 
\t height:60px; 
 
\t width: 100%; 
 
\t padding:6px 0; 
 
\t font-family: 'Montserrat', sans-serif; 
 
\t font-size: 0.875em; 
 
\t text-transform: uppercase; 
 
} 
 
#dt-lpStatic ul { 
 
\t float: left; 
 
\t margin-top: 3px; 
 
} 
 
#dt-lpStatic ul li { 
 
\t display: inline; 
 
\t color:#545454; 
 
\t margin-left:40px; 
 
} 
 
#dt-lpStatic ul li:nth-child(1) { 
 
\t margin-left:0; 
 
} 
 
.subscribe-btn-muted { 
 
\t padding:12px 50px; 
 
\t border:2px solid #555; 
 
\t border-radius: 13%/50%; 
 
\t \t -webkit-border-radius: 13%/50%; 
 
\t \t -moz-border-radius: 13%/50%; 
 
\t float:right; 
 
\t color:#555; 
 
} 
 
#hero { 
 
\t width:100%; 
 
\t background: #212121; 
 
\t height:100vh; 
 
} 
 
#hero-content { 
 
\t margin:30vh auto; 
 
\t text-align: center; 
 
} 
 
#hero .secTitle-bg-dark { 
 
\t width:200px; 
 
\t padding: 15px 0; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-style: italic; 
 
\t color: #555; 
 
\t font-size: 1.5em; 
 
\t font-weight: 300; 
 
\t margin:30vh auto; 
 
\t background: #212121; 
 
} 
 
.secTitle-bg-dark:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: 0; 
 
    top: 65vh; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 2px solid #313131; 
 
}

<body> 
 
\t <section id="hero"> 
 
\t \t <header id="dt-lpStatic"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><img src="imgs/logo-muted.png" alt="RH logo"></li> 
 
\t \t \t \t \t <li>Home</li> 
 
\t \t \t \t \t <li>Blog</li> 
 
\t \t \t \t \t <li>About</li> 
 
\t \t \t \t \t <li>Get In Touch</li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <div class="subscribe-btn-muted">Subscribe</div> 
 
\t \t \t </div> 
 
\t \t </header> 
 
\t \t <div id="hero-content"> 
 
\t \t \t <img src="imgs/logo-full-big.png" alt="RH Visual Design logo"> 
 
\t \t \t <div class="secTitle-bg-dark">latest work</div> 
 
\t \t </div> 
 
\t </section> 
 
</body>

出典

2016-07-25 user1607991

これは実際にはフレックスボックスの本当に素晴らしい候補です。

編集：単に優しいヒント：擬要素が::beforeと::afterのように、::接頭辞をしなければならないあなたはこれを行うことにより、コードをたくさん簡素化することができます。擬似セレクタには、a:hoverとinput:focusのようなコロンが1つしかありません。

body { 
 
    background-color: #333; 
 
} 
 

 
.latest-work { 
 
    color: #999; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.latest-work span { 
 
    display: block; 
 
    padding: 10px 0; 
 
} 
 

 
.latest-work::before, 
 
.latest-work::after { 
 
    width: 1px; 
 
    height: 100px; 
 
    content: ''; 
 
    background-color: #999; 
 
}

<div class="latest-work"> 
 
    <span>latest work</span> 
 
</div>

出典

2016-07-25 23:35:46 ratherblue

私はフレックスボックスを一度も使用していませんが、これが良い候補になるのは何ですか？私はそれがグリッドに使われていると思った？謝罪、私はまだナブです。 @ratherblueに感謝します！ – user1607991

さて、私は別にコードを実行するときにはうまくいきましたが、私のコードで動作させようとすると、もう一度消えるようになっています...私が何をしているのか見てみる必要があると思います。しかし、大きな感謝!!!私はフレックスボックスが思っていた以上に多くを見ている... \ _ [-_-] _/ – user1607991

"最新の仕事"のテキストに垂直線を完全に中央にしたいので、これは素晴らしい候補です。 ':: before'と' :: after'はpsuedo-elementsなので、通常の要素のように操作することができ、flexboxルールに該当します。上記のコードでは、 'flex-direction：column'を実行したので、要素は垂直方向に積み重ねられます。また、ヘッドアップとして：フレックスボックスを使用する場合は、サファリとIE 11のスタイルのベンダープレフィックスが必要になります。https：// autoprefixerのような多くのオンラインツールがあります。 github.io/ – ratherblue

:after要素にdisplay: block;を追加 - 擬似要素は、ブロックレイアウトのためにこれを必要とします。

出典

2016-07-25 23:33:25 Toby

さて、私はそれをしたが、それはまだ私が要素の下にラインを入れることができないのですか？ – user1607991

あなたは 'position：absolute;'を使用しています。これは要素を絶対的に配置します。なぜそれを使用していますか？ Tbh私は上記の答えに従うと思いますが、もっと包括的です（Flexboxを説明するように頼むのではなく、おそらくGoogleでそれを読んでから最初に読んでください）。 – Toby

右に...ありがとう！私はそれを積み重ねようとしていたので、私は絶対を使った。 – user1607991

:: afterは要素の下に積み重ねません

答えて

関連する問題