CODEWITHSUNDEEP
htmlcsscss-position
Ivan Topić
Ivan Topić

Reputation: 3185

Full height on pseudo element and vertically centering its content

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 :)

Upvotes: 1

Views: 90

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371013

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>

Upvotes: 3

Related Questions