I would like to print some text with CSS. Please let me know if there is any property to do this. I know CSS is only styling but I got a requirement to do like that. thanks.
Take a look at the CSS 2 spec - the generated content section.
You are looking for the content property.
This property is used with the :before and :after pseudo-elements to generate content in a document.
And:
The following rule causes the string "Chapter: " to be generated before each H1 element:
H1:before {
content: "Chapter: ";
display: inline;
}
The CSS content property may be what you need.
Related
I'm wondering it if is possible to display text on a HTML page from a CSS file.
For example for a web host instead of having 100MB display on a plan upon 4 pages and not having to edit each one but the CSS itself.
For example:
CSS
100MB
and than in text
Our plan has {text from css displays here}
Thanks
You can use the :after pseudoselector. Suppose your "our plan has" part has an ID planid, and your HTML looks like this:
<div id = "planid">Our plan has</div>
Then you can do this in the CSS:
#planid:after {
content: ' 100MB'; /*what the element will contain*/
display: inline; /*it's inline*/
/*more styling*/
}
The :after selector creates a pseudo-element after the selected element. To create one before it, use the :before selector.
Little demo: little link.
Used to after before properties
yes do this as like this
HTML
<div>Hello</div>
Css
div:after{
content:'100mb';
}
live demo
more info
you can do this using pseudo elements like :after - http://jsfiddle.net/spacebeers/LQy7T/
.your_class:after {
content: "YOUR TEXT";
color: red;
background: blue;
display: inline;
}
CSS is not designed to do that kind of work, it's for organizing styles and not for managing contents.
What you need is a variable to store your value and then show it many times. So you need PHP, JS, Ruby, Java or your favourite language.
Is it possible to prefix the "li" items with a small image ? I didn't find a suitable css attribute for it.
You can use an image for the bullet point:
ul { list-style-image: url("fancybullet.gif"); }
Failing that, you cold set the list-style-type to none, and then use CSS to place an image in the right place, like in this article.
You could use the CSS :before pseudo-selector.
li:before { content: url(image.jpg); }
Note this may not work completely correct in IE8 and below. Here's some more information on the :before and :after selectors.
I feel you may be better off doing this in Javascript however using a library like jQuery. I assume this is a problem that needs a dynamic solution after HTML is rendered to the screen, in this case it may be best to use Javascript.
Is it possible to add pseudo element declaration inline. For eg. can I do the following inline ?
.XYZ:after {
content: '';
width: 100%;
display: inline-block;}
<div class="XYZ"></div> /*Pseudo element should be declarer inline*/
No, it is not possible to apply pseudo selectors via inline CSS, that's only possible from within <style></style> blocks or external stylesheet file.
Imagine constructing an email template with inline pseudo selector that uses content property, bad guys could have done the harm I suppose. So it is not possible.
No. pseudo element stylings may only be declared in an external stylesheet or inside <style></style> tags.
Hacss may provide the experience you're looking for.
Demo
I haven't found any documentation yet, so I don't think it's doable.
But it's worth asking.
Can I specify actual Text inside a style, within the stylesheet?
I have a few places that use the same text in the same div places. And instead of using javascript or retyping the same text in the divs, I was pondering if styles can have actual "text" inserted inside.
.someclass {
text:"for example"; /* this is how I'd imagine it, IF it were possible */
color:#000;
}
I might be pushing this one.
You're looking for the content property.
Unfortunately, it can only be used with pseudo-elements.
This property is used with the :before and :after pseudo-elements to generate content in a document.
So you could do something like...
.someclass:before {
content: "This text will be added at the beginning of the element"
}
.someclass:after {
content: "This text will be added at the end of the element"
}
you can use this approach with the :before and :after pseudo-elements
.someclass:after {
content:"for example";
color:#000;
}
Use before or after pseudo-class to acheive this:
For example:
.someclass:before{
content:"for example";
}
I do not think that could be done in CSS. But in jQuery it would look like :
$('.someclass').html("for example");
Is there a way to add special characters ♦ through CSS styles if so can you show an example that works on most browsers?
No, it is not possible, as such.
When using :after { content: }, you cannot specify HTML tags nor entities in the content string. You can, however, specify the symbols directly. (This is because the content string is not parsed as XML/HTML, but as plain text, and is inserted verbatim.)
In other words: a:after { content: "<" } will yield the equivalent visual to Some Link<.
a:after { content: "♦" }; will work perfectly, tho'.
You can use the :after and :before pseudoelements, however they are not supported by all browsers, have a look at
http://www.w3schools.com/css/pr_pseudo_after.asp
http://www.w3schools.com/css/pr_pseudo_before.asp
You should always avoid using CSS content because it's wrong to mix presentation with content of the page.
Additionally, CSS content is not supported by some browsers, i.e. by IE6 and IE7.
If I wanted to do it, I'd use CSS to attach background image and add some HTML element around the word:
<style type="text/css">
abbr { padding-right:20px;
background:url("http://img690.imageshack.us/img690/2005/blackdiamond.png") right no-repeat; }
</style>
<abbr>Something</abbr> very very Important goes here.
Result:
The only problem is - if I can modify the HTML to wrap my word with <span> or <abbr> or any other HTML element I could probably just wrtite ♦ in the code itself... your call.