当元素包含长文本时,如何强制伪“ after”元素的宽度？

这个问题已经在这里有了答案：            >            Why is a flex item limited to parent size?                                    1个
我有以下代码：

@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>

结果看起来像这样：

如何使第四个红色正方形的宽度为150px？这里也是codepen.io link.

最佳答案

您可以通过添加flex-shrink来告诉它在任何情况下都不收缩：0-参见下面的演示：

@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;
  flex-shrink: 0; /* added */
}

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>Ampedit! impredit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias
    impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet
    odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum
    alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet
    odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Amet odio rerum alias impedit!</li>
</ol>