48

I was toying around with the :before pseudo class in css, trying to insert a special character but the result is not what I was hoping for.

Using:

.read_more:before {
    content: "»";
    margin-right: 6px;
}

I get the character I want, but with an  character before it and using:

.read_more:before {
    content: "»";
    margin-right: 6px;
}

I get the complete » on the html page.

I can think of a couple of ways to solve my problem, but I was wondering what the correct syntax would be if I wanted to use the :before pseudo class.

By the way, my doctype is:

<!doctype html>
<html lang="en">
jeroen
  • 91,079
  • 21
  • 114
  • 132
  • The answer to your problem is described in answers below and [here](https://alanhogan.com/tips/css/special-characters-in-generated-content), but in addition, I wanted to point out that `::before` has been the preferred selector, over `:before`, ever since since CSS3. The CSS3 syntax distinguishes between _pseudo-classes_ (like `:visited`) and _pseudo-elements_ (like `::first-line` and `::after`). – Alan H. Apr 11 '22 at 15:25

6 Answers6

68

try this

.read_more:before {
    content: "\00BB";
    margin-right: 6px;
}

\00BB is the unicode representation of that character. It should reasonably works =)

  • That’s right I wrote at length about this in 2005 and updated that post with some tips: https://alanhogan.com/tips/css/special-characters-in-generated-content – Alan H. Apr 11 '22 at 15:20
26

The answer has been already told, but I want to refer to:

I get the complete &raquo; on the html page.

That's because CSS content property isn't treated as HTML. It's not appended to the DOM, therefore any HTML-specific markup isn't parsed. You can insert a character directly: content: "Ԃ"; or use Unicode notation: content: "\0504";.

Crozin
  • 43,890
  • 13
  • 88
  • 135
17

Try specifying <meta charset="utf-8">. Ideally you want to set this in the server.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • @Tae - http://static.medero.org/kak.html the server dictates the encoding if it is not specified in the page itself... and because he didn't explicitly specify UTF-8 it's obvious he needs to. – meder omuraliev Nov 10 '10 at 17:10
  • 3
    This is a wrong answer. The mistake is using HTML entity in CSS code. You need to convert them; in this case: Â --> Â(html) --> \00C2 (css) – Neithan Max Mar 18 '17 at 07:22
  • Ok what you actually want is a link to a conversion tool no? https://www.branah.com/unicode-converter – Peter Kionga-Kamau Mar 01 '19 at 21:52
10

I know it's been a while since this question was asked but in case someone might need it nowadays, I found the solution for it.

Here's a chart with lots of glyphs. Find the one you want and copy the hex code for it.

Then paste it here to convert.

You'll get a value that looks like this: \00E1 (CSS Value)

Paste this value on your 'content:' and be happy :)

Andre Lopes
  • 128
  • 2
  • 7
2

Your browser isn't using the correct text encoding -- that is, it isn't using the same text encoding as your editor. If you are receiving the page from a Web server, the best approach is to make sure the server is sending the proper Content-Type header. If you don't have control over the Web server's headers, or if you will be doing a lot of testing using local HTML files, add appropriate tags to your document for the encoding and HTML version you are using. I recommend using UTF-8. The CSS file (if it is separate from the HTML) should use the same encoding.

kindall
  • 178,883
  • 35
  • 278
  • 309
1

Add this on the html, inside the <head> section

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8" />

But if the html page is coded in PHP, I would prefer the following:

<?php
    header("Content-Encoding: utf-8");
    header("Content-type: text/html; charset=utf-8");
?>

And don't forget to save any file (css, html, php) with UTF-8 encoding

Omiod
  • 11,285
  • 11
  • 53
  • 59