Question

是否可以在没有position: absolute的伪元素上拥有全高？

如果没有，我如何将内容放在伪元素上position: absolute？

没有position: absolute 的第一个Codepen http://codepen.io/anon/pen/gWPoVx

第二次尝试使用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%;
    }

  }
}

我很擅长使用任何黑客只是为了在现代浏览器中完成这项工作：）

Answer 1

如果你想要背景的全高度和内容的完全居中，我会将每个任务分成两个伪元素。

以下是您的代码的简化版本。我使用::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>

伪元素的全高度和垂直居中的内容

1 个答案: