Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
551 views
in Technique[技术] by (71.8m points)

css - Why does a ::before pseudoelement with content have only leading spaces stripped in a 'display: flex' container?

See jsfiddle

Note that both leading and trailing spaces are stripped from each element fairly consistently, except for the pseudo element (::before.content), which only has its leading space trimmed. Why is this? I would expect the trailing space to be removed as well

.flexy {
  display: inline-flex;
}

.noname::before {
  content: ' has ';
}
<div class="flexy">
  A girl
  <span class="noname">no name</span>
</div>
<br/>
<div class="flexy">
  A girl
  <span class="noname"><span>no name</span></span>
</div>
<br/>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

To better understand this, let's first add the missing cases.

.flexy {
  display: inline-flex;
}

.noname::before {
  content: ' has ';
}

.noname-after::after {
  content: ' has ';
}
span {
  border:1px solid;
}
<div class="flexy">
  A girl <span class="noname">no name</span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname"><span>no name</span></span>
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"><span>no name</span></span> some text after
</div>
<br>
<div class="flexy">
  A girl <span class="noname-after"></span><span>no name</span> some text after
</div>
<br>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...