.newclass {
content: "\00A9";
}
In the above code, a copyright icon shows up. I have a question and a requirement.
Question - Where is this icon come from? any image from my pc, internet or some other way.
Requirement - If I have to introduce a new code, and associate a new icon for that code, how to do it?
It's an unicode escape sequence,
here you can find some examples:
http://css-tricks.com/snippets/html/glyphs/
these works with pseudo elements and are unicode characters.
http://codepen.io/anon/pen/EFAtk
there a list here : http://unicode-table.com/en/
HTML test
©
<p> #
http://unicode-table.com/en/</p>
CSS test
:before {
color:red;
}
body:before {
content: "\00A9";
}
p:before {
content:'\0040';
}
Related
I need to know if I can modify content on the last page with the :last selector.
I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page.
But I can't find it in the documentation and it does not work when I try to use it.
I'm trying to clear the content on the footer of my last page like this:
#page {
#bottom-right {
content: "Please turn over";
}
}
#page :last {
#bottom-right {
content: none;
}
}
It works when I use it with the :firstselector. How can I get the effect for the last page?
I'm using Weasyprint to print PDF files.
This can be achieved using named pages.
Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.
Example below:
HTML
<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->
CSS
.last-page {
page: last_page;
page-break-before: always; /* Use if your last page is blank, else omit. */
}
#page {
#bottom-right {
content: "Please turn over";
}
}
#page last_page {
#bottom-right {
content: none;
}
}
Tested with Weasyprint - worked a charm.
Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).
It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.
I am reading the code from Font-Awesome, which is a library that (from what I understand) overwrites parts of Bootstrap to modify some of the code.
There is a class called fa-twitter, created in Font-Awesome:
.fa-twitter:before {
content: "\f099";
}
I do not understand what \f is doing in this situation, and where the numbers "099" are being used. I have tried searching Font-Awesome on Github, thinking perhaps .fa-twitter is defined elsewhere, or something the numbers could be used in, but I haven't found anything so far.
It's not \f that matters. It's Unicode character code.
\f099 means It's not literal "f099" but Unicode value of "f099"
Table itself
Example:
#first:after {
content: "\0178"
}
#second:after {
content: "0178"
}
With "\": <i id="first"></i>
<br/>Without "\": <i id="second"></i>
It's not 'f', it's the content that's important:
If you have code like this:
<p class="email">myemail#gmail.com</p>
You'll just get the email address: myemail#gmail.com.
But if you add this in the CSS:
.email:before {
content: "Email: "
}
You'll get Email: myemail#gmail.com without making any changes to the HTML.
In this case, it's adding a symbol, indicated by the code F099. In other words, the twitter bird:
I do not have access to the HTML or PHP for a page and can only edit via CSS. I've been doing modifications on a site and adding text via the ::after or ::before pseudo-elements and have found that escape Unicode should be used for things such as a space before or after the added content.
How do I add multiple lines in the content property?
In example the HTML break line element is only to visualize what I would like to achieve:
#headerAgentInfoDetailsPhone::after {
content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}
The content property states:
Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.
So you can use:
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
white-space: pre; /* or pre-wrap */
}
http://jsfiddle.net/XkNxs/
When escaping arbitrary strings, however, it's advisable to use \00000a instead of \A, because any number or [a-f] character followed by the new line may give unpredictable results:
function addTextToStyle(id, text) {
return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}
Nice article explaining the basics (does not cover line breaks, however).
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
If you need to have two inline elements where one breaks into the next line within another element, you can accomplish this by adding a pseudo-element :after with content:'\A' and white-space: pre
HTML
<h3>
<span class="label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
CSS
.label:after {
content: '\A';
white-space: pre;
}
I had to have new lines in a tooltip. I had to add this CSS on my :after :
.tooltip:after {
width: 500px;
white-space: pre;
word-wrap: break-word;
}
The word-wrap seems necessary.
In addition, the \A didn't work in the middle of the text to display, to force a new line.
worked. I was then able to get such a tooltip :
You may try this
#headerAgentInfoDetailsPhone
{
white-space:pre
}
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
}
Js Fiddle
For people who will going to look for 'How to change dynamically content on pseudo element adding new line sign" here's answer
Html chars like
will not work appending them to html using JavaScript because those characters are changed on document render
Instead you need to find unicode representation of this characters which are U+000D and U+000A so we can do something like
var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);
div:before{
content: attr(text);
white-space: pre;
}
<div text='I want to break it in javascript, after comma sign'></div>
Hope this save someones time, good luck :)
Add line break to ::after or ::before pseudo-element content
.yourclass:before {
content: 'text here first \A text here second';
white-space: pre;
}
Found this question here that seems to ask the same thing: Newline character sequence in CSS 'content' property?
Looks like you can use \A or \00000a to achieve a newline
<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>
The .mbr and .dbr classes can simulate line-break behavior using CSS display:table. Useful if you want to replace real <br />.
Check out this demo Codepen: https://codepen.io/Marko36/pen/RBweYY,
and this post on responsive site use: Responsive line-breaks: simulate <br /> at given breakpoints.
is there a way with pure css to Have a link that might say "New! Watch Video" and then once someone has clicked the link have it remove the "New" portion of the link. I'm assuming this can be done w/ Jquery but I'd like to see if there is an way to remove it with just css.
Rather than removing words, add the word "New" if the link hasn't been visited yet
a:before {
content: "New! ";
}
a:visited:before {
content: "";
}
No extra markup, and you don't need to put the word "New" everywhere.
Wrap the "New!" in a span inside the anchor:
<a class="newText" href="somepage.html"><span>New! </span>Watch video</a>
and in your CSS, set:
a.newText:visited span { display: none; }
I would recommend using a class on the anchor (like "newText" above) so that this formatting will only be applied to the links you want it on. And keep in mind that the "New!" text will reappear if the user clears their browser history.
Assuming the anchor will take you to a new page you can use the following technique:
a:before {
content: "New! ";
}
On any page you wish to remove or change it, you can add a body class
body.blah a:before {
content: "";
}
I wrote some dummy css. Instead of a tag I got escaped characters. How can I add a div tag instead?
.HeaderName:after{
content: "<div class=\"Name2\">text</div>";
}
.Name2 {
color: red;
}
The content declaration cannot add tags to the page (tags are structural); additionally, CSS is meant for presentation changes, not structural content changes.
Consider using jQuery, instead, such as:
$(".HeaderName").after("your html here");
If you need that extra tag only to make the added text red, just do this:
.HeaderName:after{
content: "text";
color:red;
}
Tested on Chrome.
You can't insert tags using content: in CSS. Here is the relevant part of the spec; see the 'content' property in the CSS 2.1 spec.