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

Question

我有以下代码：

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

Answer 1

您可以通过添加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>