html - 如何在容器外显示数字/文本

Question

我想向我的站点添加一些自定义的 css/html，以便列表帖子(前 10 个最佳假期等)的数字在列之外。例如，而不是正常的

|1。纽约

|

|2。佛罗里达州

|

|3。夏威夷

|

我希望它看起来像

1 |纽约

|

2 |佛罗里达

|

3 |夏威夷

|

我希望数字非常大，但又不会搞砸文本的格式。我见过像纽约时报这样的地方用引号、图片等来做这件事。

我试过这段代码:

.list-number{
    display: block;
    font-family: 'Merriweather'; 
    color: rgba(0,0,0,.7);
    font-size: 5.5rem;
    position: relative;
    left: -15px;
    width: 0;
    overflow: visible;
    z-index: 100000;
}

它把数字移到了左边，但是数字一离开容器就消失了。也留下了本来应该在的那段空间。我已经对此进行了一个小时的修补，但我不确定需要更改什么。

(当为移动设备调整大小时，我计划在@media 查询中将其更改为正常 - 但还没有那么远。)

Answer 1

您甚至可以将此答案用于无序列表。

使用元素计数器并将其放在 ::before 伪元素中的列表项之前

li {
    width: 150px;
    background: orange;
    display: block;
    margin: 5px 0 5px 30px;
    padding: 5px;
    box-sizing: border-box;
}
ul {
  counter-reset: num;
}
li:before {
    counter-increment: num;
    content: counter(num);
    display: inline-block;
    position: relative;
    width: 20px;
    margin: -5px 20px -5px -25px;
    padding: 5px;
    color: yellow;
    background: green;
    text-align: center;
}

<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 <li>item5</li>
 <li>item6</li>
 <li>item7</li>
</ul>