css-content Questions
6
Solved
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"...
Rotatory asked 20/8, 2013 at 7:36
1
Example:
:root {
--PrimaryThemeColor: #3acfb6; /* with or without quotes */
}
.ColorSwatch:after {
content: var(--PrimaryThemeColor);
}
When this is rendered, the computed CSS is literally t...
Paleography asked 3/8, 2016 at 19:7
2
We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you:
ol.instructions {counter-reset:instructions-section;}
ol.instr...
Romaine asked 28/10, 2013 at 13:40
4
Solved
To seperate the links in navigation I have set the following
#menu-main li a:after{
content: " * ";
}
The current item gets additional
text-decoration: underline;
my problem now is, that the...
Braunschweig asked 3/10, 2012 at 12:30
3
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 bef...
Flowage asked 2/5, 2015 at 1:14
2
Solved
I'm trying to use the after pseudo element to add some effects to a site.
<div class="product-show style-show">
<ul>
<li>
....
<div class="...">
<div class="readMo...
Sparkle asked 11/4, 2015 at 0:42
1
Solved
As for pseudo-elements :after/:before there are apparently two ways if I want to display image there:
using background-image:url(imgurl.png);
using content:url(imgurl.png);
Are both ways correc...
Clambake asked 13/2, 2015 at 23:51
3
Let's say I have mark up:
<div data-generated="world!">Hello </div>
..with CSS:
div:after {
content: attr(data-generated);
}
This produces the text: Hello world! - FIDDLE
...
Cormier asked 24/6, 2014 at 11:13
1
Solved
I'm trying to display 2 things in my elements; the class name and an own created data-size variable. Seperated with one white space.
I could get this working by doing this:
.element:before {
con...
Alegre asked 26/6, 2014 at 10:19
1
Solved
I'm trying to overlay a transparent image over another via the after property. It's not even showing up using this method. I wanna use a base64 encoded image if at all possible. I tried with a regu...
Dealer asked 15/3, 2014 at 5:57
4
Solved
I have downloaded a site with a site downloader, which had nice icons on it. But after downloading it, that icons went away and I cannot see any image file.
In html, it's like this.
<li class=...
Policeman asked 21/2, 2014 at 6:15
1
One of the requirements I'm trying to create step definitions for is that each element should be numbered. Is there an API for checking whether an item has the correct CSS generated content?
We're...
Poulos asked 22/11, 2013 at 11:35
1
Solved
See this fiddle: http://jsfiddle.net/xanld/3yh28/
div:before {
content: 'This div is empty';
}
div:empty {
background:red;
}
I'd like to add css content to empty divs only. I can either use th...
Firework asked 11/11, 2013 at 5:22
1
Solved
I have an <a> element, after which I want to show a > sign, using the :after pseudo element.
The <a> element's content is dynamic, so its width changes, and sometimes the content e...
Correctitude asked 29/10, 2013 at 9:35
2
Solved
As you probably know, if you will to use :before and/or :after pseudoelements without setting text in it, you still have to declare content: ''; on them to make them visible.
I just added the foll...
Pulitzer asked 8/10, 2013 at 13:33
5
Solved
I have the following CSS code
.editable:before {
content: url(../images/icons/icon1.png);
padding-right:5px;
}
this is used in conjunction with the following markup:
<span class="editable"...
Tingaling asked 30/3, 2010 at 15:4
1
Solved
Is it possible to use CSS to change the color of a SVG path which is within a pseudo element data-URI?
<a href="http://externalurl/">External Site</a>
CSS:
a[href^="http://"]:after ...
Felicity asked 26/8, 2013 at 19:21
3
Solved
I got http://jsfiddle.net/8p2Wx/2/ from a previous question I asked and I see these lines:
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
If I take away...
Horsemint asked 7/3, 2012 at 10:35
1
Solved
So, i've got a custom style on an input element, and I want to place some text on the input with the use of :after.
The problem i'm running into is that i cannot seem to change the font-weight on ...
Mojave asked 9/8, 2013 at 15:4
1
Solved
As defined here:
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
You can use code like the following to increment numbers in pseudo elements.
H1:before {
content: "Chapter " ...
Switchman asked 5/6, 2013 at 15:23
2
Solved
I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, dis...
Mizuki asked 7/5, 2013 at 22:17
4
Solved
I'm making a user stylesheet for the add-on 'stylish.'
It applies a semi-transparent dark box over the entire page for night-browsing.
I'm using:
html:before {
content:url()!important;
positio...
Klinges asked 7/5, 2013 at 20:33
2
Solved
I was trying to add some effects for visited links, then I got this problem.
Here is the code: http://dabblet.com/gist/5447894
Only Opera can successfully change the content of :before pseudo-ele...
Yamamoto asked 23/4, 2013 at 22:46
3
Why does IE10 require the presence of a p:hover {} rule for transitions to work on a pseudo element?
HTML:
<p>Hover</p>
CSS:
p::after {
content: " here";
transition: all 1s;
}
p:hover::after {
font-size: 200%;
color: red;
}
Live demo: http://jsfiddle.net/SPHzj/13/ (works in ...
Conjectural asked 15/4, 2013 at 12:39
1
Solved
Here is a behavior I don't quite understand regarding z-index and css pseudo element ::before / ::after.
It is illustrated on this jsfiddle : http://jsfiddle.net/jgoyon/T6QCf/
I created a positio...
Stiffnecked asked 13/4, 2013 at 15:24
© 2022 - 2024 — McMap. All rights reserved.