Question

今天早上处理一些排版的东西。怎么只有我的.quote ::之前工作。 http://codepen.io/samducker/pen/WpoBOB

编辑：当我调整大小时，当文本换行时，它开始出现在第一行下面。

<h1 class="quote">&ldquo;Drink better not more&rdquo;</h1>
<p><span class="first-letter">A</span> week designed for cocktail lovers, Loves Cocktails is an exciting new 7-day
long festival arriving in Nottingham this April.</p>

.quote {
  font-family: $serif-font;
  text-align: center;
  font-size: 4rem;
  padding: 0.3em 0em;
}
.quote::before, .quote::after {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 8px;
    width: 32px;
    background: #ec3723;
  }

p {
  max-width: 40em;
  margin: auto;
}

.first-letter {
  font-size: 3rem;
  margin: 20px;
  float: left;
}

Answer 1

如果您在谈论在调整大小时呈现的::after元素是因为您没有为top定位元素使用absolute属性。你需要做一些像

这样的事情

.quote {
  position: relative;
  /* other properties here */
}

.quote::before, 
.quote::after {
  top: 0;
  /* other properties here */
}

Demo

默认情况下，您的absolute定位元素会与文本一起呈现，因此当它包装时，由于您没有定义top，因此您的::after伪形式正在破坏。为了解决这个问题，我定义了top，这样无论你的文字包裹多少，伪元素都会保留在原位。

正如你评论的那样。在这里，我添加了另一个声明，我试图下拉::after伪。另请注意，我为top: auto;伪设置::after因为我们最初设置top: 0;。

Demo 2

为什么我的::在工作之前，而不是我的::之后没有。帮助css hivemind

1 个答案: