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.
Related
My question is really simple, just what i am trying to do is :hover, :after and :before , i want hover anf after to embed in same element, check out my css code:-
#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
Here the element have an icon in :before which i cnt remove or modify, and also i want to have an hover effect on it...
Any solution for this, my console doesn't show the hovering effect?
Interesting question. If you're able to show us a working example we could probably be of more help.
However, in theory there's nothing wrong with what you're attempting to do (although not all browsers will like it: particularly IE8 and below).
The important thing to understand here is that :hover is a pseudo-class, whereas :before is a pseudo-element.
Here's a quick excerpt from the standard (with thanks to this answer previously on Stack Overflow):
Pseudo-classes are allowed anywhere in selectors while pseudo-elements
may only be appended after the last simple selector of the selector.
The mistake you're making is in your syntax: the order that you're appending them.
Try this instead:
#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
That should do as you wish. However this isn't going to give you great cross-browser coverage, it's not something that all browsers support of have implemented.
A better approach would be to:
reset the :before element to nothing (overwrite the styles you can't access);
use a non-repeated background image on the anchor instead (to display the image), and padding-left to give the indentation;
You can then switch the background-image in whatever fashion you see fit using :hover on the anchor in your CSS.
This will give you far better cross-browser compatibility.
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 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");
I have a span in a li. According to both Firebug and Chrome inspector the span is inheriting list styles list-style-image, list-style-position, list-style-type. Which is not what I would expect given that a span is not a list element. Anyway, because of this (I assume) the span is not being positioned where I'd like it.
How can I stop this inheritance?
Thanks
According to the CSS specification, list-style properties only apply to elements with display:list-item. See here: http://www.w3.org/TR/CSS21/generate.html#lists
Therefore, the inherited list-style properties do not apply to the SPAN element, unless it has display:list-item set.
Look at Firebug and check which class is applying the styles to the span. Simply modify that style to fix your issue. Or put a screen grab of the Firebug inspect panel here, so we can have a look
I think your reading the information from Chrome and Firebug wrong or you've done a mistake in your CSS.
Normally, spans doesn't inherit any style related to list element automatically.
Paste your CSS, so we can help you.
You can't that is just the way CSS inheritance works,
You could negate the effects by adding this to the spans:
.className {
list-style-image:none;
list-style-position:inherit;
list-style-type:none;
}
Not that any of these should effect how the spans appear, more likely a rogue margin/padding, try using Eric Mayers CSSReset
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.