0

I am trying to use the glyphicons from twitter bootstrap. I want to use the pseudo-element :after instead of before.

.glyphicon.glyphicon-search:before The above works just fine.

.glyphicon.glyphicon-search:after The above does not work.

What am I doing wrong?

user3259232
  • 97
  • 7

2 Answers2

0

It's because the glyphicon classes are only intended for use with :before and not :after. If you check out the source code in the CSS you'll see. An example would be:

.glyphicon-asterisk

the css for this looks as so:

.glyphicon-asterisk:before {content: "\2a";}

if it was like this:

.glyphicon-asterisk:before,
.glyphicon-asterisk:after {content: "\2a";}

you would be able to do your thing. You'll need to create a new class and add the content like this:

.glyphicon-asterisk:after {content: "\2a";}
Morgan Feeney
  • 737
  • 7
  • 11
-1

Maybe it is syntax issue. Try .glyphicon.glyphicon-search::after ？

Bob
  • 2,263
  • 5
  • 21
  • 30
  • Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but IE 8 only supports the single-colon, so for now, it's recommended to just use the single-colon for best browser support. :: is the newer format indented to distinguish pseudo content from pseudo selectors. If you don't need IE 8 support, feel free to use the double-colon. – user3271518 Apr 22 '15 at 14:19
  • I can try the double colon but I don't think this is causing the issue. .glyphicon.glyphicon-search:after {content: "/E###"}; .glyphicon.glyphicon-search:before {content: "/E###"}; The later works but not the first for some reason. – user3259232 Apr 22 '15 at 14:28
  • errr actually i am thinking maybe this is due to `;` . Try `.glyphicon.glyphicon-search:after {content: "/E###";}`. With the semicolon inside, since this is CSS, not JS. @user3259232 – Bob Apr 22 '15 at 14:36
  • Sorry, the semi is actually inside. – user3259232 Apr 22 '15 at 14:39
  • @user3259232 mind creating a jsfiddle shows exactly how your code works? – Bob Apr 22 '15 at 14:44