在工具中更改值之前，填充不应用于伪元素

Question

I have no idea why, but (at least in Chrome anyway) I'm trying to separate the links with a pipe '|'. I can achieve this by adding padding of 0 10% - but whenever I reload the page, there is no padding, at least until I change the value of the padding and then back to 0 10%.

If you open this codepen:

https://codepen.io/anon/pen/aXpRJv

It initially appears with no padding. Then if you change to 0 1% and then 0 10%, the padding shows correctly.

Why is this happening, and how can it be fixed? Thanks for any help

 #headerHomeLogIn:after { content: '|'; padding: 0 10%; } #headerHomeLogIn { white-space: nowrap } #headerAccountLinks { background: lightgreen; position: absolute; z-index: 1; bottom: 50px; width: 100%; height: 50px; padding-left: 25%; display: flex; align-items: center; } 

 <div id="headerAccountLinks"> <span id="headerHomeLogIn">Log In</span> <span>Sign Up</span> </div> 

Answer 1

I got it to work by adding display:inline-block;

#headerHomeLogIn:after {
  content: '|';
  padding: 0 10%; 
  display:inline-block;
}

Answer 2

You can try using px instead of percentages like this:

(I added a margin: 0 10px; to space it evenly)

 #headerHomeLogIn:after { content: '|'; padding: 0 10px; margin: 0 10px; } #headerHomeLogIn { white-space: nowrap } #headerAccountLinks { background: lightgreen; position: absolute; z-index: 1; bottom: 50px; width: 100%; height: 50px; padding-left: 25%; display: flex; align-items: center; } 

 <div id="headerAccountLinks"> <span id="headerHomeLogIn">Log In</span> <span>Sign Up</span> </div>