Theodore Steiner Theodore Steiner - 4 months ago 23
CSS Question

Nav List Items and ::Before ::After

Is it possible to add ::before and ::after elements to list items?

For example if I have the following:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>




Can I target the last item, let's say and add an ::after element like so, or, can I only target the actual UL element?

ul li:nth-child(3)::after
{
content: "";
height: 10px;
width: 10px;
background: transparent;
border: 1px solid #ccc;
}

Answer

Yes you can use. Here is the demo:

Notice the double colon notation - ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

ul li:nth-child(3)::after
{
   content: "Test";
   height: 10px;
   width: 10px;
   background: transparent;
   border: 1px solid #ccc;
}
<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
</ul>