title: Capture a literal in css
body: <p>I have several NAV Bars. Each NAV Bar is of the pattern;</p>
  
  <p>a | a</p>
  
  <p>such that  where the literal "|" occurs, it's always has a sibling a on the left.</p>
  
  <p>where a is an html anchor element and "|" is a literal separator of interest.</p>
  
  <p>What css can I use to capture that literal "|"? The idea is that I want to set it display:None  for print media.</p>
  
  <p>Thanks for any help.</p>