Issue with :after and :before pseudo element in IE 11

[kkinds]

Hi,

I’m having an issue with this particular CSS statement in IE 11

.language li:nth-child(4n):after { 
 content: ' ';
 display: block;
}`

Works fine in Chrome and FF but the list will not break at the fourth element in IE 11
Has anyone run into this before?

Here’s the html

<ul class="language">
             <li><a href="" target="_blank" >Español</a></li>
            <li><a href="" target="_blank" >HMOOB </a></li>
           <li> <a href="" target="_blank" >简体中文</a> </li> 
              <li> <a href="" target="_blank">DEUTSCH</a> </li>
                        
          <li> <a href="" target="_blank" >ગુજરાતી </a> </li>  
           <li> <a href="" target="_blank" t>РУССКИЙ</a> </li> 
         <li> <a href="" target="_blank" >한국어</a> </li> 
            <li> <a href="" target="_blank" >Tiếng Việt</a> </li>
              <li> <a href="" target="_blank" >Français</a> </li> 
     <li> <a href="" target="_blank">Polski</a> </li> 
     <li> <a href="" target="_blank" >Pennsylvaanisch Deitsch</a> </li> 
   <li> <a href="" target="_blank">HRVATSKI</a> </li>
    <li> <a href="" target="_blank">Tagalog</a> </li>  
    <li> <a href="" target="_blank" >Hindi</a></li>
 <li> <a href="" target="_blank">العربية</a> </li> 
                         </ul>

[PaulOB]

Hi,

The code you posted above does not exhibit a problem in IE11 and looks the same in Chrome and Firefox.

There will be no gap after the 4th element because the element you are inserting has no height or content.

If you add a height then a gap will appear after every 4th item.

e.g.

.language li:nth-child(4n):after {
	content: '';
	display: block;
	height:20px;
}

If that’s not the issue lease post an actual demo of the problem with full code so we can debug better

[Erik_J]

Hi @kkinds, welcome to the forum!

When you say the list will not break I assume the list is in a horizontal row. The default list has the items stacked vertically, so you must have some css that make the list horizontal.

If the LI css is a display:inline-block; rule to make the list horizontal, I think the pseudo element should only break the line within the item after the link. It should not break the horizontal row of items.

If the LI css is a float:left; rule to make the list horizontal, the pseudo element would still be contained by the item. But here the nth-child could be used to clear the float and go below in a new row of floated items.

So I suggest you try something like this:

.language li {
    float: left;
}
.language li:nth-child(4n) { 
    clear: left;
}

If you post all relevant css for the list, there could be other solutions too.

Ninjad by @PaulOB, I didn’t think of a break as an extra space after.

[kkinds]

Hey Thanks for the response!

Here’s the entire CSS:

<style>
      .language li {
        display: inline;
        padding:5px;
        
        border-right: 1px solid #009;
        
}


.language li.last {
       border: none;
}
.language {
       font-family: Verdana, Arial, sans-serif;
       font-size: 0.8em;
       font-weight: bold;
       text-align: center;
}
.language a {
       color: #009;
       text-decoration: none;
}
.language a:hover {
       color: #39F;
       text-decoration: underline;
}

.language li:nth-child(9n):after { 
 content: " ";
 display: block;

}

I tried your updates, but still no go only in IE! This is by a wide margin one of the most bizarre things i’ve ever seen, And frustrating!

[PaulOB]

@kkinds

This is by a wide margin one of the most bizarre things i’ve ever seen, And frustrating!

The code you posted again shows no sign of the bug and works exactly the same in Firefox, Chrome and IE11,

There must be something else you are not showing us?

Put your code in a codepen demo and show us where it is not working and then we can help.

Here is your code working fine in IE11.

[kkinds]

I figured out my issue and I am a giant idiot. After looking with fresh eyes, I noticed that i had that statement pointing to a class and not the ID specified in the html doc.

Working now.

thanks everyone for your help!