所有带有前缀的后续行的 CSS 样式缩进

Question

我为笔记添加了 CSS 样式。它需要包含一个文本前缀，然后是注释。这是我的 CSS...

.note:before {
    content: "Note: ";  
    font-weight: bold;
    color: blue;
    padding: 5px;
}

.note {
    background-color: #f9fcff;
    border-radius: 5px;
    border: 1px solid blue;
    padding: 5px 0px;
}

这会产生下面的 CSS 结果图像。请注意，第二行文本的缩进与第一行的第一个字符不一致。总结一下，我想要的是第一行“If”中的“I”，与第二行“between”中的“b”对齐。这可能吗？

Answer 1

您可以通过添加左填充和绝对定位之前来做到这一点:

.note:before {
  content: "Note: ";
  font-weight: bold;
  color: blue;
  position: absolute;
  top: 5px;          /* match the top padding below */
  left: 5px;         /* pretend there is 5px left padding to match other padding */
}

.note {
  background-color: #f9fcff;
  border-radius: 5px;
  border: 1px solid blue;
  padding: 5px 5px 5px 3.5em;    /* 3.5em should allow enough space for note to sit in */
  position: relative;
}

<p class="note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas imperdiet elit in porttitor posuere. Quisque lacinia nibh tellus, a cursus neque gravida at.</p>