I want to just show this: », but » is showing instead. Why is  being added to it? How come it's not just the double right arrow? What's wrong with my code?
CSS
#buttonServices1{
transition: all 0.5s;
}
#buttonServices1 span {
transition:0.5s;
}
#buttonServices1 span:after {
content: '»';
transition: 0.5s;
}
#buttonServices1:hover span {
padding-right: 25px;
}
#buttonServices1:hover span:after {
opacity: 1;
}
HTML:
<button id="buttonServices1"><span>Services</span></button>
Picture:
Why is  being added to it?
Because your stylesheet is saved as UTF-8, but the browser is decoding it using Windows-1252. This is probably because the page that's referencing the stylesheet has no declared encoding and the browser is arbitrarily guessing the Windows-1252, which is typically the default encoding on Western European locales. The byte sequence 0xC2 0xBB represents » in UTF-8 but » in Windows-1252.
Adding the <meta charset> declaration in Akjm's answer to the page(s) that reference the stylesheet should make this work. If you can't do this (for example because you are making a stylesheet that might be referenced by other people's pages which could be in any encoding), alternatives are:
encoding the character using CSS backslash-escapes, as in #RobFonseca's answer. (The HTML character reference syntax in #Akjm's answer is not effective here.)
putting the rule #charset "utf-8"; at the top of the stylesheet to tell the browser that the stylesheet has its own encoding, independently of whatever the page uses
setting the web server to serve the stylesheet with an HTTP Content-Type: text/css;charset=utf-8 header
Support for approaches 2–4 has traditionally been rocky, though I haven't checked browser support recently.
It could be a rendering error with the character rendering.
First thing's first, make sure that in your head tags you have something like this:
<meta charset="utf-8">
Then, try replacing the character in the content attribute with the charcode
content: '»'
/* OR USE THIS */
content: '»'
The CSS content property requires you to use Unicode hex escapes
content: '\00bb',
Here is a useful chart of them
https://css-tricks.com/snippets/html/glyphs/
Related
I'm having a difficulty on including special characters in my CSS preprocessor. This is the code:
.xyz{
&:before{
content: '佥佬佧佼';
some: properties;
}
}
This runs smoothly in plain HTML. But on my ReactJS Project, the output in my DOM is this:
.xyz:before{
content: '\3A3\255C\D1\3A3\255C\BC\3A3\255C\BA\3A3\255C\255D';
}
Then the content has ASCII code output.
I am not sure where to put or set the character encoding. I'm using VSC with UTF-8 encoding. Can someone please help?
Finally got what I was looking for.
On top of the page, write:
#charset "UTF-8";
Now everything is fine.
I have the following HTML style tag
<style>
#loginBackground {
background-image: url(https://somedomain.com/services/storage?id=89174&type=picture&secret=ucWEYqzpQk8QCaHHp3lfDy5vRrISWwUgzGLnWaDD×tamp=1478862301);
background-size: cover;
background-position: center center;
}
</style>
Chrome queries this url: https://somedomain.com/services/storage?id=89174&type=picture&secret=ucWEYqzpQk8QCaHHp3lfDy5vRrISWwUgzGLnWaDD×tamp=1478862301 without turning & in & so the image is not displayed correctly.
Document doctype is <!DOCTYPE html> so HTML 5.
Everything works fine if I don't encode these ampersands but according to this thread what's the de facto practice on ampersand encoding in html all ampersands must be encoded.
I've tried to use & instead of &, using double or single quotes around the url but nothing works.
Is this a browser bug or in this case ampersand should not be encoded?
<style> (and <script>) elements are defined (in HTML 4 terms) as containing CDATA. (HTML 5 says the same thing, but not as clearly).
This means that the normal rules for markup do not apply and entities are not expanded.
If you want an ampersand character inside a <style> element then you must use a literal ampersand.
I'm facing this problem,
If opened in IE9 under windows 7, in my pre formatted html block \ is rendered as wong symbol ₩ if courier font is used. If I set Tahoma, e.g. it's ok. In chrome, even if courier is set, symbol is rendered as backslash.
How to fix it?
Edit: code that reproduces this:
<html><head>
<style>
pre {
margin-top: 10px;
padding-left: 7px;
padding-top: 5px;
margin-left: 50px;
font-family: courier;
background-color:#ddd;
}
</style></head><body>
<pre>
Can\'t
</pre>
</body></html>
I cannot reproduce the problem on my Win 7, so I still suspect the reason is that your system has an actual font under the name “Courier” (normal Windows 7 is not shipped with such a font). Either that font is broken regarding the backslash, or it simply lacks it and the browsers picks up the character from another font. In the latter case, that font might be broken.
There are surprisingly many fonts that have a glyph for “₩” U+20A9 WON SIGN where they should have a glyph for backslash. There has been some speculation about the reasons. But the point is that there should be no reason why such a font would be used unless your browser resorts to picking up backup fonts. In that case, IE might have been set to use e.g. Batang Che as the default monospace font – and it’s one of the fonts with that problem.
On the practical side, “Courier” should almost never be used. In systems that have a font under such a name, it is often a bitmap font that looks rather bad especially when font size is changed. Use “Courier New” instead. Or something better, such as
pre, tt
{ font-family : Consolas, Lucida Console, Courier New, monospace; }
As Raymond Chen pointed out in the comments, the browser has likely guessed the encoding incorrectly.
If you want to specify the encoding directly in the file, then you can use a meta tag in the head element of the page, like this:
<meta http-equiv="Content-Type" content="text/html; charset=my_encoding_here">
Where my_encoding_here is actually a string representing the encoding you used when creating the HTML. Common encodings are utf-8 and ISO-8859-1, but you should figure out exactly which encoding your editor is using and make sure you match it.
If you're serving pages like this, then you might choose to specify the encoding in your webserver, which will put the information into an HTML header when it returns the page.
Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like:
.header:before{
content: 'Back';
}
this would be quite handy...It could be done through Javascript but using css for this would really make lives easier :)
Unfortunately, this is not possible. Per the spec:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).
In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document language in use.
As an example, using the given CSS with the following HTML:
<h1 class="header">Title</h1>
... will result in the following output:
BackTitle
As almost noted in comments to #BoltClock's answer, in modern browsers, you can actually add some html markup to pseudo-elements using the (url()) in combination with svg's <foreignObject> element.
You can either specify an URL pointing to an actual svg file, or create it with a dataURI version (data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))
But note that it is mostly a hack and that there are a lot of limitations :
You can not load any external resources from this markup (no CSS, no images, no media etc.).
You can not execute script.
Since this won't be part of the DOM, the only way to alter it, is to pass the markup as a dataURI, and edit this dataURI in document.styleSheets. for this part, DOMParser and XMLSerializer may help.
While the same operation allows us to load url-encoded media in <img> tags, this won't work in pseudo-elements (at least as of today, I don't know if it is specified anywhere that it shouldn't, so it may be a not-yet implemented feature).
Now, a small demo of some html markup in a pseudo element :
/*
** original svg code :
*
*<svg width="200" height="60"
* xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
* <div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
* I am <pre>HTML</pre>
* </div>
* </foreignObject>
*</svg>
*
*/
#log::after {
content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}
<p id="log">hi</p>
In CSS3 paged media this is possible using position: running() and content: element().
Example from the CSS Generated Content for Paged Media Module draft:
#top-center {
content: element(heading);
}
.runner {
position: running(heading);
}
.runner can be any element and heading is an arbitrary name for the slot.
EDIT: to clarify, there is basically no browser support so this was mostly meant to be for future reference/in addition to the 'practical answers' given already.
It is not possible probably because it would be so easy to XSS. Also, current HTML sanitizers that are available don't disallow content property.
(Definitely not the greatest answer here but I just wanted to share an insight other than the "according to spec... ")
If you have the ability to add a HTML elsewhere on the page, you can reposition it over the area where your CSS content shows up.
So you add your CSS content:
.cssClass::after {
content: "Content and Words and Things";
color: #0000EE;
}
I added hyperlink blue so it looks like a link.
Then you add an href that has no text in between the tags with an id or class that you can reference. It can be anywhere as long as it's on the same page.
<a id="link" href="#"></a>
And then position the link over the content where you want it:
a#link{
height: 20px;
width: 100%;
left: 0;
top: 5%;
position: absolute;
}
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">
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 » 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.
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