gpt4 book ai didi

html - 当元素包含长文本时,如何强制伪 "after"元素的宽度?

转载 作者:可可西里 更新时间:2023-11-01 13:19:06 24 4
gpt4 key购买 nike

<分区>

我有以下代码:

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
ol {
list-style: none;
counter-reset: my-awesome-counter;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}

ol li {
counter-increment: my-awesome-counter;
display: flex;
width: 50%;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}

ol li::before {
content: counter(my-awesome-counter);
font-weight: bold;
font-size: 3rem;
margin-right: 0.5rem;
font-family: 'Abril Fatface', serif;
line-height: 1;
width: 150px;
display: inline-block;
border: 1px solid red;
text-align: right;
}

body {
padding: 1rem;
font-family: sans-serif;
}
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Tempore nostrum laborum sequi obcaecati.</li>
<li>Illo iusto dolores magnam ratione!</li>
<li>Very very very very very very very very very very very very ...long text!</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>

结果是这样的:

enter image description here

如何使第 4 个红色方 block 的宽度为 150 像素?这是 codepen.io link也是。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com