如何在::前和实际内容之间删除空格

2022-10-15 04:24:19标签htmlcsshtml-listspseudo-element
提问

我想创建一个定制的编号样式,用于一个有序的列表,它的脚注。 然而当我这样做的时候 如果在此之间有空格,伪元素(见下面的代码片段) 标记和它在HTML代码中的实际内容有一个在自定义号和项目内容之间呈现的空间。 我需要做些什么来摆脱空白,或者至少让它保持一致(即它总是在那里),而不是在HTML代码中有一个。 让我们把它变成白色的空间。因为所有的好理由。这是通过添加“to the counter(x)内容”来完成的。 在@IT高盛的回答上:如果你不想要“标准化”空间,你仍然可以这样做,但要增加职位:相对;以及对ol li的负面权利:在规则之前,将数字移动到li内容的开始:

li::before pseudoelement (see snippet be<li> tag and its actual content in the HTML code there is a space rendered b

ol {
  list-style: none;
  counter-reset: x;
}
ol li {
  counter-increment: x;
}
ol li::before {
  content: counter(x);
  vertical-align: super;
  font-size: smaller;
}
<ol>
  <li>no leading space</li>
  <li>
    leading space
  </li>
<ol>

回答

ol {
  list-style: none;
  counter-reset: x;
}
ol li {
  counter-increment: x;
}
ol li::before {
  content: " " counter(x) " ";
  vertical-align: super;
  font-size: smaller;
}
<ol>
  <li>no leading space</li>
  <li>
    leading space
  </li>
</ol>

回答

ol {
  list-style: none;
  counter-reset: x;
}
ol li {
  counter-increment: x;
}
ol li::before {
  content: " " counter(x) " ";
  vertical-align: super;
  font-size: smaller;
  position: relative;
  right: -0.2em;
}
<ol>
  <li>no leading space</li>
  <li>
    leading space
  </li>
</ol>

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5