I'm trying to add content to something before an item using the CSS :before + content: fields. I want to insert a checkmark (☑), BUT if I use that in the content option, it prints as the literal. How can I tell CSS to make that a checkmark, not the literal string ☑?
Try this:
#target:before {
content: "\2611";
}
You need to use Unicode values inside the content property. (The list of miscellaneous symbols may also be useful.)
A heavy checkmark is listed as U+2713 so you would put content: "\2713";
Use the checkbox character literally in your CSS rule instead of the encoding -
#target:before {
content: "☑";
}
See: http://jsfiddle.net/e3Wt2/
Related
I'm trying to render a custom checkbox in an Electron app.
:before {
content: '✔';
}
It renders differently at random without any code changes:
It seems that it defaults to a font Segoe UI Emoji. Is it possible to force rendering as left picture (not as emoji)?
It's possible to override the Emoji rendering of a psuedo element. I would recommend trying to use a special unicode character. U+FE0E (0xFE0E). Like so: content: "\2714 \FE0E";
content: "[enter your emoji unicode here] \FE0E";
I used this convert tool to get the right CSS unicode for the emoji to place inside the 'content': https://r12a.github.io/app-conversion/
About U+FE0E
This codepoint may change the appearance of the preceding character.
If that is a symbol, dingbat or emoji, U+FE0E forces it to be rendered
in a textual fashion as compared to a colorful image. The Unicode
standard defines some standardized variants. See also “Unicode symbol
as text or emoji” for a discussion of this codepoint.
Sources: https://codepoints.net/U+FE0E, https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
Example:
.test:before {
content: "✔";
}
.test2:before {
content: "\2714 \FE0E";
}
<!-- if your looking in Chrome or Firefox this will both look the same -->
<div class="test"></div>
<div class="test2"></div>
How can I display the "$" sign through CSS Content:" " I've tried all kinds of different codes. Putting just
div.example {Content:"$1000";}
displays on the site like "00".
Trying to do this before resorting to Javascript.
.dollar:before {
content: '$';
}
You can use the following code for displaying the dollar sign in the CSS content property
div.example { content: "\0024"; }
There isn't quite enough HTML to go on, but to take a shot:
The CSS property content is to be used with ::before and ::afterand when i put a $ inside my content declaration, everything works...
See JSfiddle here
I'm trying to add an html entity (→ →) using css when a link is hovered with the following css:
#menu1 a:hover:after {
content: "→";
}
But the output is just → instead of →. The same problem happens when using the decimal (8594) or the entity (rarr).
How do I include an HTML entity with css?
#menu1 a:hover:after {
content:"\2192 ";
}
Working example: http://jsfiddle.net/wCzUf/
More details - Can you use HTML entities in the CSS “content” property?
List of HTML entities - http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
That depends on how you include the CSS in your HTML file. Inside an inline stylesheet, the entity should work.
If you have an external stylesheet, you can't use HTML entities. Just put in the character itself ("→"), properly encoded with the .css file's charset. Alternatively, you can use a Unicode escape sequence, in your case "\2192" (the hex value of 8594).
This was already answered before in another question. As per the solution, you need to use escaped Unicode in CSS content property.
#menu1 a:hover:after {
content: "\002192";
}
I am working on a small project.
I wish to add an anchor tag <a> inside another element using the css content attribute and the :after pseudo.
e.g.
.classname:after { content: '<a>hello</a>'; }
// this will print "<a>hello</a>"
What I need it to do is make it have a working anchor tag, pointing to a given href.
I know you can use something like this content: attr(title); so it will use .classname title attribute as a text, I don't know if this is even possible but, it would be cool if it was.
You can't use the CSS :before and :after pseudo-elements to insert HTML elements. To add HTML elements you need to use JavaScript.
You cant im afraid. You have to use javascript :(
A quick example of putting a link into a p with the id of myP tho... and a variable for a url (which could be obtained from any value really)...
var myUrl = "http://www.glcreations.co.uk";
document.getElementById("myP").innerHTML = "<a href='" + myUrl + "'>A link for you to click on</a>";
I’ve got the following CSS to add a PDF icon to any link that links to a PDF:
a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);}
Is it possible to put some title and alt attributes on this image? I would like it so that the user is able to hover over the icon and get some text like “This links to a .pdf file.” Which I’ve typically done just by putting title attributes to it, but can’t figure out if I can do that through this method.
No, content only accepts raw text and image data, not HTML.
You need to use JavaScript to dynamically add tooltips to your existing HTML elements.
As for the icon, you could use a background image and some padding:
a.pdf-link {
padding-left: 2px;
padding-right: 20px;
background: url(../images/icon-pdf-link.gif) right center no-repeat;
}
If you need to specifically have a tooltip only on the icon, though, you need to do everything in JavaScript as the comments say.
You can this, these days, using CSS3.
According to https://www.w3.org/TR/css-content-3/#alt:
1.2. Alternative Text for Speech
Content intended for visual media sometimes needs alternative text for speech output. The content property thus accepts alternative text to be specified after a slash (/) after the last . If such alternative text is provided, it must be used for speech output instead.
This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols.
Here the content property is an image, so the alt value is required to provide alternative text.
.new::before {
content: url(./img/star.png) / "New!";
/* or a localized attribute from the DOM: attr("data-alt") */
}
Based on the answer I just did the following with jQuery:
$(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");