我试图为响应不同窗口大小的内容制作类似代码的样式。我想用纯CSS编号的段落行,但我还没有弄清楚如何。我肯定肯定会有一些方法给出我最近用纯CSS看到的所有酷炫和惊人的东西。
这是我到目前为止所做的,但显然只是对段落进行了编号。
p:before {
counter-increment: para;
content: counter(para);
margin-right: 7px;
}
...思想
也许有可能通过创建一个与段落高度相同的::before来伪造它(以某种方式)并计算到底部。
也许有可能以某种方式根据区域动态地将每个行的段落转换为单独的,并且通常会从这些段落开始计算。
也许我们可以在段落的左边设置样式,然后用其他方式绘制计数。
以下是一些示例内容供参考。我不控制格式。
Cupcake ipsum dolor sit amet pie tart. Brownie pudding lemon drops fruitcake pastry jelly-o cake macaroon cookie. Dessert wafer biscuit cookie gummies sweet carrot cake. Dragée fruitcake I love marzipan gingerbread sugar plum. I love brownie oat cake I love toffee chocolate jelly marzipan. Jelly beans powder gummies chocolate powder caramels powder sweet. Chocolate cake carrot cake I love. Sugar plum gummi bears chocolate bar dragée carrot cake bear claw apple pie chocolate cake topping. I love candy canes bonbon sweet tart jelly beans caramels dragée. Gingerbread I love dragée muffin chupa chups I love toffee sweet I love. Jelly-o toffee danish powder gingerbread I love I love bear claw. I love dragée jujubes I love oat cake. Pie chocolate bar cotton candy. Macaroon fruitcake jujubes danish candy canes lemon drops I love sesame snaps.
Pastry cotton candy tiramisu bonbon powder gummi bears cotton candy. Biscuit jelly powder I love cheesecake pudding topping. Cheesecake lollipop dessert pastry marshmallow icing cotton candy halvah chocolate. Donut brownie lollipop jelly-o jujubes jelly-o. Liquorice pie cake toffee cake. Icing pastry pie gingerbread cupcake chocolate cake. I love cookie cake croissant marzipan jelly beans cupcake cheesecake marshmallow. Chocolate cake apple pie chupa chups chocolate cake candy canes biscuit I love cookie sweet. Cotton candy caramels topping sweet roll muffin. Gingerbread cake icing pastry pudding fruitcake lollipop halvah I love. Tiramisu tootsie roll macaroon liquorice. Toffee marzipan macaroon toffee jelly-o cupcake pastry gummies ice cream. Jelly candy canes sweet roll lollipop.