Question

我有一些来自数据库的要点。在每个段落之前，我需要显示一个勾号。我使用::before伪属性来设置刻度线。

根据屏幕尺寸，一个段落进入另一行。但我希望第二行从第一行开始的地方开始，而不是从刻度线开始的地方开始。

这是fiddle。

代码：

＆＃13;

p::before {
  content: "\2714";
  color: #00839F;
}
p {
  padding-left: 20px
}

＆＃13;

<div>
  <p>
    this is one paragraph and the text starts in new line aligned with tick mark and some more texts to push it to second line
  </p>
  <p>
    this is another paragraph
  </p>
</div>

＆＃13;

Answer 1

您可以在p上使用font-size，它可以与您可能使用的任何36px一起使用（对于大字体 - 例如：margin - 您可能必须使用p::before 1}}在p::before { content: "\2714"; color: #00839F; } p { padding-left: 20px; text-indent: -1em /*font-size is 16px by default*/ } p:first-child { font-size: 20px } p:last-child { font-size: 22px }中调整所有内容）请参阅下面的代码段：

段

<div>
  <p>
    this is one paragraph and the text starts in new line aligned with tick mark and some more texts to push it to second line
  </p>
  <p>
    this is another paragraph
  </p>
  <p>
    this is one paragraph and the text starts in new line aligned with tick mark and some more texts to push it to second line
  </p>
</div>

{{1}}

Answer 2

您必须添加新样式才能解决此问题。

查看fiddle

中的输出

更新后的样式

p::before {
  content: "\2714";
  color: #00839F;
  margin-left: -18px;
}

Answer 3

您可以对before伪元素使用绝对定位，如下面的代码

＆＃13;

p {
    padding-left: 20px;
    position: relative;
}

p::before {
    content: "\2714";
    color: #00839F;
    position: absolute;
    left: 0px;
}

＆＃13;

将段落换行与上线填充对齐

3 个答案:

段