擬似要素の高さとその内容の垂直方向の配置

Question

position: absoluteなしで擬似要素の高さ全体を設定できますか？

もしそうでなければ、position: absoluteでコンテンツを擬似要素の中心に置くことはできますか？ position: absolutehttp://codepen.io/anon/pen/bWELGv

HTML

<div class="fusion-layout-column"> 
    <div class="fusion-column-wrapper"> 
     <p>Lorem ipsum</p> 
    </div> 
    </div> 

SCSS

を使用して

まずCodepen position: absolute http://codepen.io/anon/pen/gWPoVx

ことなく、第2の試み210

.fusion-layout-column { .fusion-column-wrapper { background: #fff; display: flex; align-items: center; overflow: hidden; padding-right: 1em; &:before { content: 'G'; background: #ddd; display: inline-block; padding: 2em 1em; margin-right: 1em; height: 100%; } } } 

私は最近のブラウザでは、この作業をするためにただのハックを使用して良いよ:)

Answer 1

あなたがコンテンツの背景のための完全な高さと完全なセンタリングの両方が必要な場合、私は2つの擬似の間で、各タスクを分割します要素。

以下は、コードの簡略化したバージョンです。バックグラウンドには::before、コンテンツには::afterが使用されています。

.fusion-layout-column { 
 
    width: 400px; 
 
    margin: auto; 
 
} 
 

 
.fusion-column-wrapper { 
 
    position: relative; 
 
    background: #fff; 
 
} 
 

 
.fusion-column-wrapper:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 4em; 
 
    background: #ddd; 
 
} 
 

 
.fusion-column-wrapper::after { 
 
    content: 'G'; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 2em; 
 
    transform: translate(-50%, -50%); 
 
    color: #333; 
 
    font-weight: 700; 
 
} 
 

 
.fusion-column-wrapper p { 
 
    margin-left: 5em; 
 
    font-size: 18px; 
 
    line-height: 1.4em; 
 
} 
 

 
body { 
 
    background: #333; 
 
}

<div class="fusion-layout-column"> 
 
    <div class="fusion-column-wrapper"> 
 
    <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p> 
 
    </div> 
 
</div>