如何实现CSS伪元素前缀后多行文本与正文首字符对齐？

Absolutely, this is totally feasible! The issue with your current CSS is that the :before content is inline, so when the note text wraps to the next line, it aligns under the start of the pseudo-element ("Note:") instead of the main text. Here are two straightforward fixes:

Solution 1: Using Absolute Positioning for the Prefix #

This method positions the "Note:" prefix outside the main text flow, creating consistent spacing so wrapped lines align properly with the first line's content.

Update your CSS like this:

.note {
  position: relative; /* Required to anchor the absolute pseudo-element */
  background-color: #f9fcff;
  border-radius: 5px;
  border: 1px solid blue;
  padding: 5px 5px 5px 65px; /* Left padding makes space for the prefix */
}

.note:before {
  content: "Note: ";
  font-weight: bold;
  color: blue;
  position: absolute;
  left: 8px; /* Match this to your padding for clean alignment */
  top: 5px; /* Vertically align with the note text */
}

The left padding on .note reserves space for the prefix, which sits in that gap without disrupting the main text flow. All lines of the note will now start at the same horizontal position.

Solution 2: Using a Flex Container #

If you prefer avoiding absolute positioning, a flex-based setup separates the prefix and content to ensure proper wrapping alignment.

First, adjust your HTML to split the prefix and content into separate elements:

<div class="note">
  <span class="note-prefix">Note: </span>
  <span class="note-content">If you need to align wrapped text between lines, this method ensures perfect alignment.</span>
</div>

Then apply this CSS:

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

.note-prefix {
  font-weight: bold;
  color: blue;
  flex-shrink: 0; /* Keep the prefix from shrinking */
  margin-right: 5px;
}

.note-content {
  flex-grow: 1; /* Let the content fill remaining space */
}

Here, the prefix stays fixed in place, and the content wraps under itself rather than under the prefix—exactly the alignment you want.

Either method will make the "I" in "If" line up perfectly with the "b" in "between" when the text wraps. Pick whichever fits your existing code structure best!

内容的提问来源于stack exchange，提问作者Colum