html - CSS :before with content break paddings

Question

我有这个间距很好，但没有标签:

https://jsfiddle.net/my75k9mw/5/

我在使用 :before 添加标签后得到了这个:

https://jsfiddle.net/my75k9mw/4/

我怎样才能像第一个例子一样保留标签并保持良好的间距？

我的代码:

div.wrapper {
  border: 1px solid red;
  padding: 10px 10px 5px 10px;
  border-style: dashed;
}

div.wrapper:before {
  content: 'FAQ wrapper';
  font-size: 10px;
  position: relative;
  top: -20px;
  color: red;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

div.wrapper div.item {
  border: 1px solid gray;
  padding: 10px;
  margin-bottom: 10px;
  border-style: dashed;
}

div.wrapper div.item:before {
  content: 'FAQ item';
  font-size: 10px;
  position: relative;
  top: -20px;
  color: gray;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

div.wrapper div.item div.question {
  border: 1px solid gray;
  padding: 15px;
  margin-bottom: 10px;
}

div.wrapper div.item div.question:before {
  content: 'Question';
  font-size: 10px;
  position: relative;
  top: -25px;
  color: gray;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

div.wrapper div.item div.answer {
  border: 1px solid gray;
  padding: 15px;
}

div.eni-faq-wrapper div.eni-faq-item div.eni-faq-answer:before {
  content: 'Answer';
  font-size: 10px;
  position: relative;
  top: -25px;
  color: gray;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

<div class="wrapper">
  <div class="item">
    <div class="question">
      <a>I am a question.</a>
    </div>
    <div class="answer">
      <p>I am an answer.</p>
    </div>
  </div>
  <div class="item">
    <div class="question">
      <a>I am a question.</a>
    </div>
    <div class="answer">
      <p>I am an answer.</p>
    </div>
  </div>
  <div class="item">
    <div class="question">
      <a>I am a question.</a>
    </div>
    <div class="answer">
      <p>I am an answer.</p>
    </div>
  </div>
</div>

更新:在我的案例中，HTML 需要保持不变。

Answer 1

您可以对标签使用绝对定位:

div.wrapper {
  border: 1px solid red;
  padding: 10px 10px 5px 10px;
  border-style: dashed;
  position: relative;
}

div.wrapper:before {
  content: 'FAQ wrapper';
  font-size: 10px;
  position: absolute;
  transform: translateY(-50%);
  z-index: 1;
  top: 0;
  left: 0;
  color: red;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

div.wrapper div.item {
  border: 1px solid gray;
  padding: 10px;
  margin-bottom: 10px;
  border-style: dashed;
  position: relative;
}

div.wrapper div.item:before {
  content: 'FAQ item';
  font-size: 10px;
  position: absolute;
  transform: translateY(-50%);
  z-index: 1;
  top: 0;
  left: 0;
  color: gray;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

div.wrapper div.item div.question {
  border: 1px solid gray;
  padding: 15px;
  margin-bottom: 10px;
  position: relative;
}

div.wrapper div.item div.question:before {
  content: 'Question';
  font-size: 10px;
  position: absolute;
  transform: translateY(-50%);
  z-index: 1;
  top: 0;
  left: 0;
  color: gray;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

div.wrapper div.item div.answer {
  border: 1px solid gray;
  padding: 15px;
  position: relative;
}

div.wrapper div.item div.answer:before {
  content: 'Answer';
  font-size: 10px;
  position: absolute;
  transform: translateY(-50%);
  z-index: 1;
  top: 0;
  left: 0;
  color: gray;
  background: white;
  padding-left: 5px;
  padding-right: 5px;
}

<div class="wrapper">
  <div class="item">
    <div class="question">
      <a>I am a question.</a>
    </div>
    <div class="answer">
      <p>I am an answer.</p>
    </div>
  </div>
  <div class="item">
    <div class="question">
      <a>I am a question.</a>
    </div>
    <div class="answer">
      <p>I am an answer.</p>
    </div>
  </div>
  <div class="item">
    <div class="question">
      <a>I am a question.</a>
    </div>
    <div class="answer">
      <p>I am an answer.</p>
    </div>
  </div>
</div>