I've seen a couple of posts about how to set a title to the MeanMenu jQuery Responsive menu plugin but they do it by editing the js. I was wondering if it's possible to do it through css using :after? I've tried but failed dismally.
It is possible to add text using CSS :after. See Snippet. This is about all of the help I can provide without seeing the actual code you are using. Keep in mind when using :after that the pseudo-element that gets inserted into the html is contained within the element that has the :before or :after applied to it. So, the nav:after pseudo element will be contained in the nav element "after" the rest of the child elements.
nav:after{
display:block;
content:"This is text inserted using :after";
clear:both;
}
<nav><!-- Empty element that gets content added by using :after --></nav>
EDIT: Added screen shot. It may not be working for you due to the specificity of your selector or the location in which you are declaring the styles in your css file. You can try greater specificity by using something like this:
.mean-bar > nav.mean-nav:after {
display:block;
content:"This is text inserted using :after";
clear:both;
color:white;
}
Related
I need your help to understand a selector of css that I wuold like to use to hide an element.
At this url you can see the page http://www.bachecahotel.com/annunci/all_ads.html
Well I wuold like to hide "Tutte le offerte" the second one in orange.
DOing some test I succeded in that using this css:
.juloawrapper.adsmanager-list.adsmanager-list-table div > h3:first-child
{
display:none;
}
But I dont understand why it doesn't effect other h3 also if they are child of divs
Thanks
Frank
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.
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I got http://jsfiddle.net/8p2Wx/2/ from a previous question I asked and I see these lines:
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
If I take away content:"", it ruins the effect, and I don't understand why it's necessary.
Why is it needed to add an empty content to :after and :before pseudo-elements?
You cannot style generated content without defining what that content should be. If you don’t really need any content, just an extra “invisible element” to style, you can set it to the empty string (content: '') and just style that.
It’s easy to confirm this yourself: http://jsfiddle.net/mathias/YRm5V/
By the way, the snippet you posted is the micro clearfix hack, which is explained here: http://nicolasgallagher.com/micro-clearfix-hack/
As for your second question, you’ll need an HTML5 shiv (small piece of JavaScript) to make <nav> stylable in some older browsers.
As the CSS spec. states, :after and :before pseudo elements are not generated if prop. content isn't set to a value other than 'normal' and 'none': http://www.w3.org/TR/CSS2/generate.html#content
content initial value is 'normal' and 'normal' computes to 'none' for the :before and :after pseudo-elements.
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
see this for better explanation :
Css Content 1
Css Content 2
and the nav element is :
One of the new elements for HTML 5 is the element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders. In this article I’ll discuss how and where to use it as well as some reservations I have with the specifications definition.
Html5 TAGS
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
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.