CSS：之前使用内容中断填充

Question

我有一个很好的间距，但没有标签：

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

使用:before添加标签后，我有了这个：

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

如何在第一个示例中保留标签并且间距也很好？

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新：在我的情况下，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>

Answer 2

将position: relative;添加到div.wrapper div.item div.question，将position: absolute; top: -6px;添加到div.wrapper div.item div.question:before

https://jsfiddle.net/my75k9mw/20/

Answer 3

为什么不使用fieldset + legend？

＆＃13;

＆＃13;

<fieldset>
  <legend>I am a question</legend>
  <p>I am an answer</p>
</fieldset>

＆＃13;

＆＃13;

＆＃13;