将自定义文本添加到有序列表<li>

马奎佐

我正在尝试使用<ol><li>创建烹饪指导的有序列表。但是,我需要在每次自动计数之前添加文本“ Step”,因此它看起来如下:

<ol>
    <li>Place bag in freezer, etc...</li>
    <li>Preheat oven</li>
</ol>

步骤1.将袋子放入冰箱等。

步骤2.预热烤箱


我尝试:before在CSS中使用选择器,但将自定义文本“ Step”放置在自动计算和内容之间。这是我的CSS:

li:before{
    content: "Step ";
    font-weight: bold;
}

这就是结果

1.将袋子放入冰箱等中。

2.步骤预热烤箱

有没有办法修改默认行为,以便它自动列出“步骤1”,“步骤2”等?

马奎佐

感谢Huangism指出我要在list之前添加文本,在那里找到了解决方案:

ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 0;
}

li:before {
  content: "Step " counter(elementcounter) ". ";
  counter-increment: elementcounter;
  font-weight: bold;
}
<ol>
  <li>Place bag in freezer, etc...</li>
  <li>Preheat oven</li>
</ol>

我不得不调整左填充,因为list-style-type: none;摆脱了自动编号的功能,但仍然留下了它会占用的空间。

结果:

步骤1.将袋子放入冰箱等。

步骤2.预热烤箱

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用javascript / jquery创建<li>元素并将其添加到有序列表

来自分类Dev

在下拉列表的第一个 li 中添加自定义文本

来自分类Dev

LocalStorage并将li添加到列表

来自分类Dev

使用 JavaScript 将 HTML li 文本添加到新的 li 列表

来自分类Dev

将自定义元素添加到ngRepeat列表

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

将自定义文本添加到MVC 5的下拉列表中

来自分类Dev

如何将新的li标签动态添加到无序列表

来自分类Dev

如何将自定义文件添加到自定义文章列表页面

来自分类Dev

在<li>中查找文本并将图像添加到该<li>

来自分类Dev

如何添加到列表内的 onclick 函数 ie<li onclick=""><button onclick=""></button></li>

来自分类Dev

使用jquery将li添加到现有ul

来自分类Dev

如何将自定义文本添加到可以自动翻译的模块中

来自分类Dev

将自定义图标添加到边框抖动内的文本字段中

来自分类Dev

将自定义文本添加到Word交叉引用字段

来自分类Dev

iMacros如何将自定义文本添加到提取的TXT

来自分类Dev

将自定义文本添加到图像并保存android

来自分类Dev

将自定义文本/注释添加到日期选择器

来自分类Dev

通过短代码 WordPress 将自定义文本添加到联系表 7

来自分类Dev

溢出:在有序列表中隐藏在div上会影响li,Chrome错误?

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

将自定义控制台添加到Eclipse控制台列表

来自分类Dev

将自定义样式规则添加到列表中的偶数元素

来自分类Dev

通过API将自定义列名称添加到Sendgrid列表

来自分类Dev

将自定义ajax按钮添加到WooCommerce管理订单列表

来自分类Dev

如何将自定义html块添加到页脚选项列表中?

来自分类Dev

将自定义列表添加到Excel 2007中的单元格

来自分类Dev

将自定义样式规则添加到列表中的偶数元素

Related 相关文章

  1. 1

    使用javascript / jquery创建<li>元素并将其添加到有序列表

  2. 2

    在下拉列表的第一个 li 中添加自定义文本

  3. 3

    LocalStorage并将li添加到列表

  4. 4

    使用 JavaScript 将 HTML li 文本添加到新的 li 列表

  5. 5

    将自定义元素添加到ngRepeat列表

  6. 6

    将自定义文本添加到MVC 5的下拉列表中

  7. 7

    将自定义文本添加到MVC 5的下拉列表中

  8. 8

    如何将新的li标签动态添加到无序列表

  9. 9

    如何将自定义文件添加到自定义文章列表页面

  10. 10

    在<li>中查找文本并将图像添加到该<li>

  11. 11

    如何添加到列表内的 onclick 函数 ie<li onclick=""><button onclick=""></button></li>

  12. 12

    使用jquery将li添加到现有ul

  13. 13

    如何将自定义文本添加到可以自动翻译的模块中

  14. 14

    将自定义图标添加到边框抖动内的文本字段中

  15. 15

    将自定义文本添加到Word交叉引用字段

  16. 16

    iMacros如何将自定义文本添加到提取的TXT

  17. 17

    将自定义文本添加到图像并保存android

  18. 18

    将自定义文本/注释添加到日期选择器

  19. 19

    通过短代码 WordPress 将自定义文本添加到联系表 7

  20. 20

    溢出:在有序列表中隐藏在div上会影响li,Chrome错误?

  21. 21

    将UL添加到LI(不将LI添加到UL)

  22. 22

    将UL添加到LI(不将LI添加到UL)

  23. 23

    将自定义控制台添加到Eclipse控制台列表

  24. 24

    将自定义样式规则添加到列表中的偶数元素

  25. 25

    通过API将自定义列名称添加到Sendgrid列表

  26. 26

    将自定义ajax按钮添加到WooCommerce管理订单列表

  27. 27

    如何将自定义html块添加到页脚选项列表中?

  28. 28

    将自定义列表添加到Excel 2007中的单元格

  29. 29

    将自定义样式规则添加到列表中的偶数元素

热门标签

归档