::before selector not working

Question

I have spent almost two hours trying to figure this out. Can anyone provide any insight into making the ::before selector work?

Relevant html:

<body><section><article><div>   
<h2>What Others Have Said...</h2>
    <div class="centered">
        <h3 class="reviewExcerpt"><p>The services were awesome</p>
        </h3>
        <div class="5 floatRight">
            <p>&mdash; Anonymous</p>
        </div>
    </div>
</div></article></section></body>

Relevant CSS:

.reviewExcerpt p::after {
  content: "\00A0.\00A0.\00A0.";
}
.5 p::before {
  content: "5 stars";
  font-family: 'Font Awesome';
  display:block;
}
.floatRight {
  float: right;
  display: block;
}
h3 {
  font-family: 'Raleway', script, Helvetica, sans-serif;
  font-size: 1.6em;
  line-height: 1em;
  margin: .8em 0 0;
  font-weight: 600;
  color: #555555;
}
h2 {
  font-family: 'Raleway', script, Helvetica, sans-serif;
  font-size: 1.9em;
  margin: .8em 0 .25em;
  font-weight: 600;
  color: #b565a7;
}
.centered {
  margin: 0 auto;
  text-align: center;  
}

JS fiddle: https://jsfiddle.net/k6y07r45/

The code shows ::after working just a couple lines up.

Selectors can't start with a number. – whaley Mar 22 '15 at 06:12 — whaley, Mar 22 '15 at 06:12
Rename `.5` to something valid, starting with a character. – Mar 22 '15 at 06:13 — , Mar 22 '15 at 06:13
It's always something simple, isn't it. Thx! – user3847276 Mar 22 '15 at 19:03 — user3847276, Mar 22 '15 at 19:03

score 0 · Accepted Answer · edited May 23 '17 at 12:06

CSS Selectors (class [.] or ID [#]) cannot start with a number.

This SO question provides some insight on the required grammar if you want to explore it.

I updated your JS Fiddle, changing your class .5 to .a-5. You should also think about making your classes more semantic, to give you and anyone else reading your code clarity on complex projects. For instance, rating is a lot more meaningful than 5 (not to mention valid).

It's also worth noting right now that ::before and ::after can only select non-replaced elements. This doesn't affect what you're doing right now, but since you're experimenting that's another tidbit to remember.

::before selector not working

1 Answers1