Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Insert special character using :before pseudo class in css

People also ask

What is :: before and :: after?

Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content. Version: CSS2.

How do you use before and after pseudo-elements?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What is the correct syntax for styling before pseudo element?

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

What can you do with the before pseudo element?

The ::before pseudo-element can be used to insert some content before the content of an element.


try this

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

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


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";.


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


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 :)


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.