I wrote a class with content but seems content just work for pseudo-classes.
How to modify my code?
http://jsfiddle.net/fuRKC/
button.follow{
content: 'Follow';
}
button.followed{
content: 'Unfollow';
}
By current CSS specifications, the content attribute only applies to :before and :after pseudo-elements. There is an old proposed extension, CSS3 Generated and Replaced Content Module, which would allow the property to apply to real elements, too. The proposal is however ten years old. It has only been implemented in Opera, except for the special case where the content value is an URL expression, interpreted as referring to an image – this is supported by Chrome and Safari, too.
Moreover, even the limited support wouldn’t do much good here, since the extension does not seem to work on Chrome when the element is a button, and on Opera, the generated content appears as such, not within a button widget.
Since your button elements have empty content, you don’t really need the extension, since for empty content, adding content is equivalent to replacing content. So in this case, you would just need to use button.follow:before, as in Kippie’s answer. Note, however, that this means that the button appears as completely empty when CSS is disabled.
So whatever might be the reason for using generated content, instead of button text in HTML, a more robust approach would be to change content with JavaScript. JavaScript can be disabled, of course, but you can use actual button text as fallback, e.g. <button id=follow>Follow</button>, and replace the content when JavaScript is enabled.
You are correct. content only works with the :before and :after pseudo classes.
Just make your css like this:
button.follow:before{
content: 'Follow';
}
button.followed:before{
content: 'Unfollow';
}
"The content property is used with the :before and :after pseudo-elements, to insert generated content."
http://www.w3schools.com/cssref/pr_gen_content.asp
More info:
http://css-tricks.com/css-content/
Related
I want to add text just with css.
But pseudo-elements are not option.
Point is to add text just with css, and have text in DOM.
Is that posssible ?
So this is not option :
.someClass:before {
content: "some text";
}
In general, the entire purpose of CSS is to preserve the distinction between style/design and content. The pseudo-selectors are a little unique in that they don't select actually existing content to "style" it, but rather create the content in the first place.
This doesn't exactly interfere with the purpose of CSS because the distinction between content and design can sometimes get a little fuzzy. Cf., for example, http://css-tricks.com/css-content/ which talks of how appending "E-mail: " before every email address can actually be a style decision.
That said, I really don't understand why you don't want to use pseudo-elements. Support is near ubiquitous (http://css-tricks.com/browser-support-pseudo-elements/). Your only other option would be to use JS/jQuery or good ol' HTML.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. (w3org)
You can not add any content without the use of :before or :after
In order to edit the DOM consider using jQuery or any other js script:
jQuery:
$('body').append('<div>Your new content</div>');
wanted to put a social icons on my site, when looking for some i ran across this site:
A site with a social icons that i want to adapt
then i saw that they are not images:
I don't know that css attribute "content"- what is it?
what is \e006, is it a font? looked at the site resources but didn't see anything related.
and looked for it on google "css content attribute" and "css \e006" But no luck.
The ::before selector inserts content before the content of the selected class that is .icon-instagram. We use the content property to specify the content to insert. You can only use the content property with pseudo-elements like :after and :before.
In your case, \e006 is a UTF-8 character. What happens is, whenever something has the class .icon-instagram applied to it, it will append this character before it. This is what it means by the pseudo-element :before. It might be a glyphicon. (Instagram icon).
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 more codes?
Using content property embeds a virtual content inside an element, it is used with a pseudo :before or :after, so if you use :before, the content will be embedded before.
From MDN :
The content CSS property is used with the ::before and ::after
pseudo-elements to generate content in an element. Objects inserted
using the content property are anonymous replaced elements.
Content property can hold any character, number, entities. For more information, you can refer an article here.
Also, you can get an handy converter here.
This method is also used by font-awesome - Example and other related svg font embedding libraries, where you can simply call classes to the elements and the fonts will be embedded virtually.
Also, just a side information, content generated using CSS content property is inline by default, also this is rendered inside the element and not outside..
It's an escaped unicode character.
As other answers have explained, the CSS rule uses the content property to insert a character by its Unicode number.
However, the character used is U+F107 PRIVATE USE CHARACTER-F107. This means that it has no meaning except by private agreements and should not be used in public information interchange. Unfortunately, some “awesome” tricks use Private Use code points to insert graphic symbols. This means that unless a very specific font, with some symbols assigned to those code points is used, a generic symbol of an unknown character appears.
So it is much safer to use an image instead, in the content proper.
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more.
You can find a list of FontAwesome here : A list of Font Awesome icons and their CSS content values
You can also go through this link, FontAwesome Examples, where you can see different icons and how to apply different size on it.
CSS Content Property : The content property is used with the :before and :after pseudo-elements, to insert generated content.
Read more
As usual I developed it in Firefox. Usually it works without modification in Chrome/Safari, and also IE8.
But when I tested on Chrome and Safari, I was surprised to see that it does not work.
My CSS is valid (validated on w3c). The JavaScript (using jQuery) seems to be valid too.
The affected elements are not redrawn after an attribute value is modified through jQuery, so the CSS rules for the new attribute value are not applied, not until I go into the Chrome inspector and deselect/select them manually...
Update: I do not have a working link for this problem anymore.
The problem was that Webkit was not "redrawing" when attributes were changed, but only when classes where changed, so CSS blocks with selectors such as div[attr=value] would not apply when attribute attr was changed to value through JavaScript.
One workaround is to use classes instead of attributes (.className) in selectors. Performing a class change after changing an attribute would also trigger a redraw also fix the problem.
This post is more than 5 years old, I believe the problem has been fixed in Chrome now.
The issues seems to come from the fact you are using attributes (selected attribute on DIVs) to control the state of your images; it seems like the webkit engine doesn't update the graphics until something actually changes - like a class or a style property.
In general, you should know that using a custom attribute like that isn't best practice. You can use a class to indicate when it's on, and .addClass("selected"),.removeClass("selected") when needed.
Also, you can display the images as background image of an element and control it directly from CSS, with:
.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }
this will simply change the image according to the div.item selected class.
For a simple work-around, you could add at the bottom of your .click handler something like $("body").toggleClass("somethingrandom");, but I really recommend to change your code to work with CSS, background-images and classes.
Do you need to modify the attribute value only? Could quite easily add a 'selected' class to the <div class="item" /> instead/as well. Using this alone/as well as your attribute targeted css will automatically update the images display.
Have you opened the error console within Safari yet?
In mine, I'm getting 404 errors on two files...
/bras/bras/A/3/2/1/bra.png
and
/bras/bras/A/1/pink/3/bra.png
EDIT:
You also have a </head> tag at the very end of your document instead of a </html> tag.
Due to mod rights on a site, I can only add css (no js etc...). When users input text in a comment box, it saves it and then displays it as a <p>. is there any way through css i can search for a specific word in the <p> tag and remove/censor it?
Thanks
There is no practical solution for that ( You may be able to select elements based on the value and hide them in CSS3 but it wouldn't be cross-browser friendly, if at all possible ). I'm afraid you'll have to use JS/server-side for a real solution.
On the hacky side of things and for IE only, you may be able to use an expression and display:none elements which contain certain strings in their nodeValue, it wouldn't work for modern browsers.
If parent element in this case input field has class or id you can hide elements inside like this
textarea#mytextarea p
display:none;
}
Once upon a time, there was a pseudo-class :contains() in the wonderful spec of CSS3 selectors ... but it disappeared early and afaik well before any implementation.
A JS solution has one problem: search bots and any user without JS (or displaying the source code) will see the f***ing original text :)