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");
Related
I have elements with this pattern (XML, not HTML, but CSS should still work):
<expan abbr="XX">YY</expan>
Sometimes I want to see "YY" in the output, sometimes I want to see "XX". No problem when I want to see "YY" and not the attribute value: just leave it as is. No problem if I want to see BOTH the element content and the attribute value: this bit of CSS does that:
expan:after {content:attr(abbr);}
will display <expan abbr="XX">YY</expan> as "YYXX".
But: problem if I want to see the attribute value and NOT the element content -- that is, if I want to see just "XX". I can use either CSS display or visibility to hide the element <expan>. But it hides EVERYTHING, including the :after pseudo-element. So, this code:
expan:after {content:attr(abbr);}
expan {display:none;}
Shows nothing at all.
So, good folk... help. This seems a very obvious thing to want to do. Of course, I could do it pretty easily manipulating the DOM with Javascript. But for various reasons, I don't have that option. I'd like to do it with simple CSS. Can I??
You'll have to use some kind of hack where the element is still there but only the pseudo element (:after) is visible to the user. An example of this would be color. If you know it's only text, then you can set the color to transparent on the main element, and set it to a real color on the pseudo. You'll still have a blank space to deal with, but you can fix that with position: relative on the parent and position: absolute on the pseudo element, because the pseudo element is a child of the main element. note that the text is still there, but you only see it if you highlight it with the mouse. That's fixable too, with ::selection, but it would still be copyable by accident, and ::select is only available in modern browsers.
Here is a demo showing what I mean: DEMO
EDIT: This one should work with text around it, but you'll have to increase the width in order to add more text: DEMO
Works for me in Chrome and Firefox.
One partial solution is to set the expan font-size to 0 and the :before content font-size to the desired size:
expan:before {
content: attr(name);
font-size: 15px;
}
expan {
font-size: 0;
}
Trying to set the :before font-size to 100% did not work.
You can only set the 'content:' attribute on ::before and ::after psuedo-elements.
But what you can do is just provide both your texts in two separate attributes, like this:
<div long-text="This is very long text" short-text="Short text">
<!-- this part is empty -->
</div>
Then your CSS can switch between them like this:
.AltText::before { content:attr(long-text); }
#media screen and (max-width:1200px) {
#HeaderTabContainer .AltText::before { content:attr(short-text); }
}
Or you could use a third attribute to toggle between them.
I've been tinkering with some css for an HTML markup. The problem I am facing is that there is a style already applied using CSS :first-line pseudo-class. What I want is to change the style of this first line on hover state. Is there a way to apply something like p:first-line:hover ?
You have to define the p:first-line before you can define the chain p:first-line:hover like so:
p:first-line { color: black; }
p:hover:first-line { color: red; }
Fiddle
Very fascinating topic! I tried a jQuery version and found out, that even that won't work. In Firefox, the class has to be applied first to work on hover, as you can see in this Fiddle. But WebKit completely ignores the :first-line on dynamic class adding.
<p class="hovered">Text .... </p>
For Firefox the class has to be set in the HTML code. Now, the following does the job.
jQuery('p').removeClass('hovered');
jQuery('p').hover(function() {
jQuery(this).addClass('hovered');
}, function() {
jQuery(this).removeClass('hovered');
});
But won't work in WebKit.
Yep, you can chain them (have a look here).
p:hover:first-line
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.
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.
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.