CSS Generated Content allows us to insert and move content around a document. We can use this to create footnotes, endnotes, and section notes, as well as counters and strings, which can be used for running headers and footers, section numbering, and lists.
2
votes
2answers
46 views
CSS: Multiple `content: attr` selector
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 {
...
0
votes
1answer
21 views
unable to find the reference to the content property in a stylesheet
Firstly let me admit that I am a beginner in CSS. I recently came across a nice website: http://www.sitepoint.com/better-solution-managing-z-index-sass/ and was curious to know how the "3" is ...
11
votes
1answer
100 views
Is it possible to select css generated content?
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
BUT...
...
0
votes
1answer
34 views
How to set “content” on an :after element inline with the text
I have an li-tag in my menu:
nav ul li ul.firstmenu li.secondtothree{
float: none;
border-bottom: 1px solid #DCDCDA;
padding:3px;
text-transform:none;
}
Then I want to add ">" after the menupoints, ...
0
votes
1answer
25 views
Aligning content (image) used in radio button so that button wont show
I currently have two radio buttons in a form that I have used the CSS property content to insert an image for each button and that changes in opacity when selected or not. The original radio button ...
0
votes
3answers
42 views
Why element has various height depending on whether it has content or not [duplicate]
I am curious to know why following elements have various heights:
<i class="icon"></i>
<i class="noicon"></i>
i {
display: inline-block;
width: 1em;
height: 1em;
...
1
vote
1answer
31 views
Firefox css transition doesn't start when preceded by generated content
** Update **
If anyone else encounters this issue, a bug has been filed with Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1011153
http://jsfiddle.net/ZEzc9/3/
Found this today and setup a ...
0
votes
1answer
22 views
Is it possible to load a background image via attribute with CSS? [duplicate]
I was wondering, if I could use CSS to load a background if the attribute gets a specific class. To demonstrate, it should load on hover.
HTML
<div id="testdiv" ...
0
votes
0answers
52 views
'content' property not working with :hover on IE
The content property isn't working with a :hover selector on any version of IE
HTML:
<img class="helpButton" src="images/helpButton.png" alt="Help Button" />
CSS:
.helpButton:hover ...
internet-explorer
0
votes
0answers
60 views
HTML5's 'data-' attribute overriding CSS 'content' property
I've looked far and wide and have been unable to find an explanation to this behavior.
Why does HTML5's data- attribute override my CSS content property on a common element?
So for example, I have ...
0
votes
1answer
54 views
How to do CSS text replacement using generated :before or :after without absolute positioning?
I'm attempting to allow our CMS editors the ability to swap out the text used for a page title using only a css override.
<header data-alternate="An Alternate Title">
This Page's Default ...
0
votes
1answer
140 views
html special characters in css content, using attr()
Relevant codepen: http://codepen.io/anon/pen/ocptF/
EDIT: The codepen uses Jade, and thus messes a few things up. I was not aware of this when starting this question.
Essentially, I thought CSS ...
1
vote
2answers
68 views
Add HTML tag inside CSS Content property
I'm looking for a way to add an HTML tag for CSS content property inside :after and :before.
Unlike this question which only discusses adding symbols like <. What I'm trying to add is something ...
3
votes
1answer
93 views
:hover doesn't work if hovered on :before pseudo generated content
I am using a combination of css :before and :hover to add an image in a button.
The problem that I have encountered is that when I hover over the :before element, it triggers the image position ...
1
vote
1answer
174 views
Image overlay using :after pseudo-element
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 regular ...
0
votes
4answers
80 views
What is the meaning of content and backward slash in css
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 ...
0
votes
5answers
125 views
How does :before work in css?
in the code:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: absolute;
top:500px;
width:400px;
border:1px solid green;
}
.parent:before {
...
1
vote
1answer
71 views
Remove bottom border from :before pseudo element when parent has border
I am creating a set of styles for a dynamic breadcrumb.
Every previous step in the breadcrumb should have a border-bottom and a forward slash. The forward slash is done as a :before.
The problem ...
2
votes
3answers
203 views
How to replace HTML text with images using CSS content cross browser
So I have a navigation menu that is generated by my CMS:
The menu's HTML is straightforward (edited for clarity):
<ul>
<li><a href="...">Journal</a></li>
...
2
votes
1answer
112 views
What does an empty value for the CSS property content do?
nav ul:after {
content:"";
clear:both;
display:block;
}
What does the "" value mean on the content property?
2
votes
2answers
49 views
Positioning the :after pseudoelement
I'm doing some experiments with the css pseudoelements. I understand that one of their advantages is the ability to insert some visual stuff in the page without affecting its semantics.
What I'm ...
3
votes
1answer
65 views
How to get image attribute with content?
I can get attribute from tag <a> but I can not get it from <img>. what can i do ?
DEMO
HTML
<img src="http://placehold.it/50x50" alt="Some alt"/>
<br/>
<a href="#" ...
0
votes
1answer
321 views
Parallax scroll a background image into permanent view
The affect I'm going for is something I can only compare to Google+ top navigation effect and through some parallax into that. That is, when you scroll down, the search bar disappears and your left ...
4
votes
4answers
417 views
content property in CSS
In some template I see that an arrow that created with CSS. something like this:
div:after{
content:"\f107";
}
this code display an arrow like this :
what is this code? where I can find ...
0
votes
2answers
43 views
span content without an extra element tag
I am trying to creat plus and minus icons using spans for my accordians. I have managed to style up the span into a circle, however without putting a <p>+</p> inside the <span ...
10
votes
1answer
439 views
Testing CSS counters using Cucumber / Selenium
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 ...
2
votes
0answers
82 views
How do I modify properties of pseudo-elements with jQuery? [duplicate]
I'm using CSS generated content to add a fade to the bottom of my page:
body::after {
background: linear-gradient(transparent, #000);
bottom: 0;
content: "";
height: 25%;
left: 0;
...
1
vote
3answers
89 views
CSS :before superscript “6”? [duplicate]
Is there a way to add a superscript "6" into the "content" CSS property for a pseudo element? I've been all over the web, trying different Unicode strings and glyph codes to try to get this to work, ...
1
vote
1answer
184 views
add css content text in 'empty' divs
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 ...
0
votes
1answer
69 views
CSS before counter not working on div
I'm having trouble displaying content before input element.
http://plnkr.co/edit/9UC93nnNm6vmmLEIYDJK?p=preview
On this plunker you can see input:before should display something, but it's not ...
5
votes
1answer
94 views
Using :after pseudo element after anchor element - browser differences
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 ...
2
votes
1answer
232 views
Getting pseudo-element content in Chrome
I'm having some trouble getting the generated content of a pseudo-element via Javascript in webkit browsers.
Context for those who care: I'm working on a jQuery mobile app and trying to use ...
3
votes
1answer
213 views
css counter not working in internet explorer for hidden content - how to fix?
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;}
...
1
vote
1answer
333 views
SEO for CSS Content and Background URL Images
Wondering if search engines will have any issues with pages where all the images are set as background images, and if it will correctly find and index the 'captions' under each picture (ie. the CSS ...
2
votes
1answer
71 views
attr(x) not working in CSS
So I would like to use pre tags in a documentation web page. Now, I want the correct language to be in the top right corner. So This is what I thought I could do:
<pre class="code" ...
1
vote
2answers
434 views
CSS ::before pseudo-element line-height?
My paragraph has a height/line-height of 50px and text-align: center, which centers the text. But p:before is causing it to increase in height/line-height, causing the text to bump down. I want both p ...
0
votes
1answer
36 views
displaying image and text within the same DIV through content
I am creating a print CSS for IE browser, within which I have to add text and an image in a div through CSS.
I am using content to add text and background to add an image, but somehow Image is not ...
1
vote
2answers
1k views
Why is this CSS:before statement not working in IE 8, IE9?
Using a :before CSS to get an image/icon here (see round circle in image below), but in Internet explorer 8+ it is just not showing up.
This is the site:
http://www.websiteprofessioneel.nl
Image ...
0
votes
1answer
81 views
Selection and insert content to a link with :before with class name does not work
Why doesn't the following work:
HTML:
<aside class="vcard">
<a href="mailto:[email protected]" class"email">[email protected]</a>
<a href="tel:7865201412" ...
2
votes
2answers
317 views
How do I resize an image in a pseudo-element?
I'm trying to do some tricks with pseudo-element.
I'm showing a ranking and I want a crown to show on top of the winner, tilted 45 degrees in the corner of the box where the image will be. But the ...
5
votes
2answers
228 views
Is declaring “content” property on :before and :after for every element a massive performance issue?
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 ...
2
votes
1answer
183 views
Use content of an element in attr() of pseudo-element [duplicate]
I have the following text:
<span class="page-number">42</span>
And I want to create a pseudo-element with something like this:
span.page-number::after {
content: attr(text());
}
...
2
votes
1answer
254 views
right-align CSS before: numbers?
I want to have numbered paragraphs without resorting to using ordered lists. I'm trying to accomplish this by using content:counter(paragraph) in CSS so that every paragraph block I create generates ...
0
votes
1answer
109 views
CSS Counters - Incrementing Deeply Nested Lists
I have a multi-page form and each page is contained within a list item. Each of those list items contains an ordered list with questions in its list items. Each of those list items contains an ...
3
votes
1answer
385 views
set Pseudo Elements content url image
i am trying to set data-img as image in pseudo element without success, here is what i have tried so far:
the markup:
<div ...
2
votes
4answers
120 views
Please explain: content:'';
Here is the code I have a question about
.store {
display: block;
position: relative;
}
.store:before, .store:after {
display: block;
position:absolute;
content:'';
}
.store:before {
...
3
votes
2answers
151 views
How does the browser render pseudo element selectors?
What I'm particularly wondering is how expensive *:after would be, resource-wise.
Would the pseudo element become the key selector in this case? Or would the client grab all the elements anyway?
In ...
2
votes
1answer
51 views
LessCSS - Evaluate color as string for content
I'm sure this is an easy one, but I can't get this to work. Essentially I am building a style guide to make work with designer/developer a bit easier. What I am trying to accomplish is this,
I have a ...
4
votes
1answer
400 views
Change fill color of data-URI SVG path in pseudo element
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 { ...
0
votes
5answers
2k views
Input placeholder using CSS only
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 ...
Related Tags
css × 90
pseudo-element × 53
html × 31
css3 × 21
css-selectors × 6
html5 × 5
firefox × 4
hover × 3
google-chrome × 3
jquery × 3
seo × 2
url × 2
javascript × 2
unicode × 2
safari × 2
pseudo-class × 2
css-transitions × 2
more related tags
Hot Network Questions
- See all data and sharing rules
- Should I provide dieline around the package-design?
- Why is it necessary to burn incense stick while praying?
- Phones broadcast the SSIDs of all networks they have ever connected to. How can these be obtained by an attacker?
- Is it OK to Ask For a Credit Card Before Beginning Work?
- What is the difference between a prawn and a shrimp?
- Circle with a fill in CircuiTikz
- How did the Black Speech come about?
- Why does the universe obey scientific laws?
- Why do we need so many transistors?
- How do Action RPGs make different weapon types feel unique?
- Change format of scaleline
- Is it okay to put household utilities in girlfriend's name if I own the home?
- Is select * still a big no-no on SQL Server 2012?
- For a symmetric, positive definite matrix, why does each diagonal element exceeds the small eigenvalue?
- How to prepare this function for integration
- Is it possible to cast 3rd level Arcane spells at level 3?
- How can I reduce the damage of stolen mail accounts?
- Exactly two of the four roots must be greater than N/2
- Should one put their Master's thesis online?
- Hindu Sects which prohibit Idol worship
- How to tackle heavy sphere redundancy?
- ETAOIN SHRDLU golf
- How can I make bash-code look good both in LaTeX and HTML?
