4

I am trying to print my webpage but the problem is the thing ::after in css is always shown in print view I tried to follow the

@media print{
    .noprint{
        display:none;
    }
}

procedure in CSS from here

Update: Here is my code in CSS

@media print{
#submenu,#submenu:after,#add,#view,#del,#edit,#menu_content,#menu{display:none;}
}//should i put double':'?

Here it issome part of page

Community
  • 1
  • 1
Cristalyn Duena
  • 71
  • 3
  • I have never tried but doesnt `.noprint::after{display: none;}` not work? – Harry Jan 17 '15 at 13:21
  • 2
    More importantly, what is generating the `::after`? If the one generating it is not marked `.noprint`, then there is no reason the pseudo-element should be prevented from printing. – BoltClock Jan 17 '15 at 13:23
  • 1
    I don't see any `::after` rules in the code that you posted; can you post more complete css code? – Erwin Bolwidt Jan 17 '15 at 13:25
  • 1
    not working @harry .noprint, it is some of my class – Cristalyn Duena Jan 17 '15 at 13:26
  • 3
    `@media print{ *::after { display:none !important; } }` – Mark Jan 17 '15 at 13:30
  • question updated @ErwinBolwidt both ':' and '::' is not working – Cristalyn Duena Jan 17 '15 at 13:31
  • i fixed it, thanks for the time. i should put `!important` – Cristalyn Duena Jan 17 '15 at 13:35
  • 1
    @CristalynDuena: Good that you found a solution but adding `!important` is never a good practice mate. Though it fixed your case, maybe changing the ordering of your CSS or the specificity of your selectors could be a better way around. If you could post a demo sample (HTML + CSS) then some of us here could help. – Harry Jan 17 '15 at 13:37
  • 1
    @Harry, I'm a big `!important` opponent 99% of the time, but to be fair this seems like a valid use. How else are you going to override specificity no matter what selector was used before the `::after`? How much damage can it do? Reset/override styles with such importance warrant the use imo. – Stephan Muller May 04 '15 at 20:47

1 Answers1

2

As mentioned by Mark Nijboer in the comments, the following rule would work:

@media print {
    *::after {
        display: none !important;
    }
}

Another way to do it would be:

@media print {    
    *noprint::after {
        content: '' !important;
    }
}

A pseudo-element without content is not shown by any browser.

If you're adamant do doing it without using !important, you will either have to make the rule overly specific to make sure you override all other selectors, or you can try and find a property that you're sure isn't used by any of the pseudo-elements.

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126