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/
Related
I am trying to add a minimal code syntax highlighting rule to a web page by only changing the color of comments - lines starting with "#" symbol within the <pre><code> tags.
To my surprise I could not find information about this by searching on StackOverflow. However projects such as ft-syntax-highlight make me assume this to be possible.
Is it possible to adjust the color of lines starting with "#" in the following code block using only css?:
<pre><code>
# function to do something
do_something_here(x1, x2);
</code></pre>
And if so - how?
Probably not what you're looking for but a minimal workaround would be using CSS's content and :before
View in jsfiddle
[comment]:before {
content: "# " attr(comment);
color: red;
white-space: pre-wrap;
width: 45vw;
display: inline-block;
}
<pre>
<code comment="function to do something here line function to do something here line function to do something here line">
do_something_here(x1, x2);
</code>
<code comment="you can use `missing()` to test whether or not the argument y was supplied">
fooBar <- function(x,y){
if(missing(y)) {
x
} else {
x + y
}
}
</code>
</pre>
Note: usedata-comment instead of comment for better html semantics
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 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>
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 am using VS Code and tring to create some custom emmet snippets. When I try to make a newline in the snippet it places a space instead.
Here is an example code:
{
"html": {
"snippets": {
"qq": "<div>\n</div>"
}
}
}
When I use the snippet 'qq' it should return:
<div>
</div>
But it returns:
<div> </div>
Any ideas why?
Try to use ${newline} instead. That should produce a new line rather than '\n'.