I am trying to include a price through a pseudo element
h3:after{
content: " (+ $75)";
}
<h3>price</h3>
But using CSS minifier prevents the "$75" to appear.
Is there a way to escape the compiler?
You can use the entity number. Although I must caution you, this looks like the beginnings of badly designed road that will lead to horrible code practices.
h3:after{
content: " (+ \0024 75)";
}
<h3>price</h3>
Use it as a data-attribute:
h3:after{
content: " (+ " attr(data-symbole)"75)";
}
<h3 data-symbole="$">price</h3>
Or use all the text as a data-attribute:
h3:after{
content: attr(data-content);
}
<h3 data-content=" (+ $75)">price</h3>
Related
I'm writing a custom theme for a website, so I cannot use Javascript. I would like to convert some numbers to roman numerals.
I tried this:
.score:before {
counter-reset: mycounter attr(score number, 0);
content: counter(mycounter, upper-roman) " ";
}
<p><span class="score" score="11">points</span></p>
Alas, it seems that "attr(score number, 0)" is always 0. It's not because of a fallback, since when I change the fallback number to 42, the result stays 0. It's not a problem somewhere else in the code, because it works fine when I replace attr(...) by a number like 42.
So why isn't this code showing what it should?
Even today, attr() is still only supported for content: usage, not for anything else, as you can see from all the red flags here: https://caniuse.com/#feat=css3-attr
Screenshot:
You can use var to pass proper values to your css files and counter, for example:
.score {
counter-increment: my-awesome-counter 0;
counter-reset: my-awesome-counter var(--data-score);
}
.score:before {
content: counter(my-awesome-counter, upper-roman);
margin-right: 5px;
}
<p><span style="--data-score:11" class="score" score='11'>points</span></p>
I am trying to get the code for the "Heavy Plus Sign" emoji (➕) working in a CSS ::before pseudo-element. The Unicode number for it is U+2795. My [non-working] code is as follows:
.plussign::before {
content: "\12795";
}
When I assign an element to use class="plussign", all I see is a little black square (the generic unknown character)
What should I use for the "content" property? The slash-one (\1) method works for all my other emojis. For example, this works for the gemstone (💎, Unicode U+1F48E):
.gem::before {
content: "\1F48E";
}
Why doesn't the "Heavy Plus Sign" emoji work in the same format?
You're looking for \2795 (no leading 1, the codepoint is U+2795, not U+12795):
.plussign::before {
content: "\2795";
}
<div class="plussign"></div>
Or of course, the character itself:
.plussign::before {
content: "➕";
}
<div class="plussign"></div>
I'll preface this question by saying I know this question has been asked before, but all the answers I can find for these appear to reference an obsolete solution that no longer works (At least in Firefox 56 [64 bit])
The obsolete method is that there used to be an automatically instantiated CSS counter named pages, so a simple bit of CSS generated from this SASS:
footer {
position: fixed;
bottom: 0;
left: 20px;
&:after {
counter-increment: page;
content: "Page " counter(page) " of " counter(pages);
}
}
Used to do what I want. Now it displays "Page [x] of 0".
I have tried using this bit of CSS to recreate my own max-page counter:
#page {
counter-increment: maxpage;
}
However this also returns 0 when used in my footer.
Is there any reasonably cross-browser friendly means of getting this functionality?
As of CSS3 you can specify counters in the #page rule. Here is an example:
#page { counter-increment: page }
The above rule instructs the layout engine to create a counter called "page" (it is called page by convention, it can be anything). This counter is incremented for each page. As with any counter, you can then use the current value of the counter anywhere in the document
For example with this CSS rule:
#pageNumber { content: counter(page) }
and this piece of HTML:
<span id="pageNumber"></span>
You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the #page:first rule to reset the counter for the first page to value 9.
#page { counter-increment: page }
#page:first { counter-reset: page 9 }
The combination of both rules will reset the counter for the first page to 9. Then for each page (including the first) it will increment the counter. This results in a counter value of 10 for the first page, 11 for the second and so on.
You can also use pure css
Example:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
... in theory. In real world only PrinceXML supports this.
Not using #page, but I have gotten pure CSS page numbers to work in Firefox 20:
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
It works on most major browsers
According to mozilla docs,
CSS counters let you adjust the appearance of content based on its
location in a document.
So, if your css rule applies to multiple element, it will count all that elements.
If you are using header and footer element which basically appear 1 time in document and multiple time in print, counter-increment won't work because in document it has only 1 appearance.
I'm helping a friend writing some articles for scientific magazines. Some publishers require the authors cited in the bibliography in the form "last name, first name", while others asked for "first name, last name" (of course with a list ordered by last name, and sometimes with the last name in small caps).
I know this would be better done with a database, but my friend's skills are not at that level.
If I write a very simple HTML page, using lines like this one
<p><span class="lname">Doe</span>, <span class="fname">John</span></p>
is there a CSS way to have the line shown as "John DOE" or must I use some JS?
You can do this with flexbox, using order (with a little adjustment).
The Code (https://jsfiddle.net/sebastianbrosch/7Lqr68ar/):
p {
display:flex;
}
.fname {
order:1;
}
.lname {
order:2;
}
.fname:after {
content:",\00a0";
}
<p>
<span class="lname">Doe</span>
<span class="fname">John</span>
</p>
You can use a more dynamic solution like this too:
#name {
display: flex;
}
#name.fl .firstname:after {
content: "\00a0";
}
#name.lf .lastname:after {
content: ",\00a0";
}
#name.fl .firstname,
#name.lf .lastname {
order: 1;
}
#name.fl .lastname,
#name.lf .firstname {
order: 2;
}
<p class="fl" id="name">
<span class="firstname">John</span><span class="lastname">Doe</span>
</p>
<p class="lf" id="name">
<span class="firstname">John</span><span class="lastname">Doe</span>
</p>
Hint: You can use this solution but it would be better to prepare the name with PHP or get the name in the right format from database. Setting the order is only setting the visual ordering but not the ordering on code or for screenreaders.
You could use float and hide the comma.
.fname {float: left; padding-right: 5px;}
.comma {display: none;}
<p><span class="lname">Doe</span><span class="comma">,</span> <span class="fname">John</span></p>
Here's a different approach using data-attributes and :before and :after
Assuming your author list is in a container that I've called .autherContainer that either has the additional class .lnLast or .lnFirst. And the author names are written as shown, with the last name written twice for each version
HTML:
<div class="authorContainer lnFirst">
<p data-ln-first="Doe, " data-ln-last=" DOE">John</p>
</div>
<div class="authorContainer lnLast">
<p data-ln-first="Dear, " data-ln-last=" DEAR">Jane</p>
</div>
CSS
.authorContainer.lnFirst p:before {
content: attr(data-ln-first);
}
.authorContainer.lnLast p:after {
content: attr(data-ln-last);
}
I made my assumptions based on the fact that if the lists were all in the same container then you could simply write them in the order they ought to be instead of following a format and adding superfluous code, but that's just me and others might disagree
I have the following HTML code:
<div id="working">Touch Me!</div>
<div id="notworking">Don't Touch Me!</div>
And I have this CSS:
#working:hover:after{
content: "Nice Touch";
color: #0C6;
}
#notworking:hover:after{
content: "I Said Don't Touch Me";
color: #C30;
}
This code is working fine (my example is here):
http://jsfiddle.net/gchoken/NaEPq/
My problem is that when I use double quotes for "I Said Don't Touch Me", I get a warning.
CSS:
#notworking:hover:after{
content: ""I Said Don't Touch Me"";
color: #C30;
}
Warning message:
Warning: Found unclosed string '";'.
So, how exactly can I escape single or double quotes in CSS?
Use a backslash.
content:"i said don\"t Touch me";
Same goes for single quotes within single-quoted strings.
jsFiddle demo
Just use a \ to escape the "
#notworking:hover:after{
content:"i said don\"t Touch me";
color: #C30;
}
Demo # http://jsfiddle.net/NaEPq/4/