CSS 等效于 Microsoft Word 中的编号列表

Question

在 Microsoft Word 中，无疑还有大多数其他(现代)文字处理器，您可以有一个元素“列表”(我在这里松散地使用术语“列表”)，带有一个悬挂的初始字符，然后插入A TAB 强制实际文本的第一个字符与 block 的左边距对齐。例如。如果我有一堆符号作为标识符，我可以:

#    Foo bar on a long line
     Where this is part of the "#" symbol identifier above
%%   And this is a new line broken over many lines, but the
     left-most edge still aligns
$__$ Isn't that fine?

我正在尝试使用 CSS 在 HTML5 中执行类似的操作。我发现了缩进，a la:

<p style="padding-left: 100px; text-indent: -100px"># Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lectus dolor, ultrices at euismod eu, dapibus sit amet mauris. Etiam maximus pulvinar sollicitudin.</p>

但是，虽然段落留下了一个悬挂缩进，但当换行时，第一个重要字符(“Lorem”中的“L”)并不与第一个重要字符对齐。例如，结果是这样的:

# Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Aliquam lectus dolor, ultrices at euismod eu, dapibus
    sit amet mauris. Etiam maximus pulvinar sollicitudin.

当我希望它像这样出来时:

# Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Aliquam lectus dolor, ultrices at euismod eu, dapibus
  sit amet mauris. Etiam maximus pulvinar sollicitudin.

进一步查看，我发现了有关悬挂标点符号的信息，但这似乎在任何地方都不受支持；此外，它特定于标点符号 - 如果我想使用字母而不是符号怎么办？

关于如何实现这一点有什么建议吗？

非常感谢。

Answer 1

这可以通过几种不同的方式来完成。

一种方法是在 CSS 中使用 ::before 伪选择器。

p { 
  position: relative;
  margin: 40px; /* added just to move snippit away from window edges. */ }


/* this applies to all p tags */
p::before { 
    position: absolute;
    left: -30px; /* moves character on top of left margin, away from text */  }


/* below merely inserts a character based on the class of the p tag */
p.hash::before {  content: '#';  }

p.bang::before {  content: '!';  }

p.huh::before {  content: '?';  }

p.dbl::before {  content: "%%"; }

p.law::before {  content: "§"; }

<p class="hash">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="bang">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="huh">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="dbl">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="law">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>