style.css:

<style type="text/css">
<!--
.file::before { content: '['; }
.file { font-size: smaller; }
.file::after { content: ']'; }
-->
</style>

page.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
<!--
.here::before { content: '['; }
.here { font-size: smaller; }
.here::after { content: ']'; }
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY LANG="en-US" DIR="LTR">
Text <span class='here'>Here</span> more text <span class='file'>File</span>
</BODY>
</HTML>

Using:

  • Chromium 5.0.375.86 (49890) Ubuntu 10.04
  • Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.6) Gecko/20100628 Ubuntu/10.04 (lucid) Firefox/3.6.6

The page looks as expected except that there is no '[' before "File".

2 answers

Doug 1095
1
point
This was chosen as the best answer

Take the HTML out of your CSS file!

style.css:

.file::before { content: '['; }
.file { font-size: smaller; }
.file::after { content: ']'; }

None of this is CSS and is only used when including CSS within an HTML document:

<style type="text/css">
<!--
-->
</style>
Answered over 6 years ago by Doug
0
points

You've got too many colons. It's just :before, not ::before.

Answered over 6 years ago by Nathan Duran
  • Exactly the same results using ":" (CSS2) and "::" (CSS3) for both browsers. C.W.Holeman II over 6 years ago
  • Can you show me the part in the CSS3 specification that tells you to use two colons? Nathan Duran over 6 years ago
  • http://www.w3.org/TR/css3-selectors/ Selectors Level 3 - W3C Proposed Recommendation - 1.3. Changes from CSS2: "new pseudo-elements, and introduction of the "::" convention for pseudo-elements" C.W.Holeman II over 6 years ago