How to force the width of the pseudo "after" element when the element contains long text?

Question

I have the following code:

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

The result looks like this:

How can I make the 4th red square 150px width? Here is codepen.io link too.

score 2 · Accepted Answer · answered Apr 08 '19 at 01:34

You can tell it not to shrink in any case by adding flex-shrink: 0 - see demo below:

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

How to force the width of the pseudo "after" element when the element contains long text?

1 Answers1