Full height on pseudo element and vertically centering its content

Question

Is it possible to have full height on a pseudo element without position: absolute ?

If not, how can I center content on pseudo element with position: absolute ?

First Codepen without position: absolute http://codepen.io/anon/pen/gWPoVx

Second attempt using position: absolute http://codepen.io/anon/pen/bWELGv

HTML

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

SCSS

.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%;
    }

  }
}

I am good with using any hack just to make this work in modern browsers :)

Answer 1

If you want both full height for the background and full centering for the content, I would split each task among two pseudo-elements.

Below is a simplified version of your code. I'm using ::before for the background and ::after for the content.

 .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>