Z-index with before pseudo-element

Issue I’ve created a ‘header’ element with a before-pseudo element. the pseudeo element must be behind the parent element. Everything works great till the moment I give my ‘header’ a z-index. What I want: The yellow ‘header’ on the foreground,

Continue reading

after pseudo element not appearing in code

Issue I’m trying to use the after pseudo element to add some effects to a site. <div class=”product-show style-show”> <ul> <li> …. <div class=”…”> <div class=”readMore less”>…</div> <a href=”3″ class=”readMoreLink” onclick=”return false;”>Read More</a> </div> …. </li> </ul> </div> And stylesheets:

Continue reading

after pseudo element not appearing in code

Issue I’m trying to use the after pseudo element to add some effects to a site. <div class=”product-show style-show”> <ul> <li> …. <div class=”…”> <div class=”readMore less”>…</div> <a href=”3″ class=”readMoreLink” onclick=”return false;”>Read More</a> </div> …. </li> </ul> </div> And stylesheets:

Continue reading

CSS :before on inline SVG

Issue Update Thanks porneL for pointing out the relation between generated content and replaced elements. I found this article which deals with this very topic: Interestingly enough, a W3C document titled "CSS3 Generated and Replaced Content Module" (from 11 years

Continue reading

CSS :before on inline SVG

Issue Update Thanks porneL for pointing out the relation between generated content and replaced elements. I found this article which deals with this very topic: Interestingly enough, a W3C document titled "CSS3 Generated and Replaced Content Module" (from 11 years

Continue reading

Pseudo element overlaps child element

Issue Fiddle! .wrapper { justify-content: center; display: flex; background: black; } .outer { text-decoration: none; display: inline-block; position: relative; background: #555; } .outer::before { display: block; content: “”; position: absolute; top: 0; width: 100%; height: 5px; background: orange; transition: all

Continue reading

Pseudo element overlaps child element

Issue Fiddle! .wrapper { justify-content: center; display: flex; background: black; } .outer { text-decoration: none; display: inline-block; position: relative; background: #555; } .outer::before { display: block; content: “”; position: absolute; top: 0; width: 100%; height: 5px; background: orange; transition: all

Continue reading

Center a Pseudo Element

Issue First time really using the pseudo :after selector. Not sure if the problem I’m running into is a limitation of it or I’m just missing something obvious. Here’s my live code. li.current:after { border-width: 1px 1px 0 0; content:

Continue reading