I'm trying to remove the :hover behaviour in an :after pseudoselector for a link. But I think that it's not possible.
a {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 12px;
color: #666;
text-decoration: none
}
a:after {
content: "·";
margin: 0 2px 0 6px
}
a:hover {
text-decoration: underline
}
a:hover:after {
text-decoration: none
}
test
test
test
Checkout the JsFiddle.
Is it possible?
The easiest way to handle this is to wrap a span around the text in each link:
<span>test</span>
On :hover only the span is given text-decoration: underline:
a:hover span {text-decoration: underline}
See: http://jsfiddle.net/thirtydot/3N9vs/27/
A similar older question: Cannot undo text-decoration for child-elements
Also relevant: CSS text-decoration property cannot be overridden by child element
You need to give the :after psuedo element position:absolute; and give it margin to shift it. Also the anchor requires display:inline-block; in order for the :after content to appear correctly.
See: http://jsfiddle.net/ECFBR/
Related
I'm learning CSS and I'm trying to copycat a simple nav bar from this website.
I want a black background to appear when hovering over an item so I did this:
nav a:hover {
background: black;
}
but the background is only covering the text. I want to it to cover the entire element like in the original site.
And here's the anchor tags CSS if you need it:
nav a {
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
color: white;
float: left;
padding-right: 2em;
margin-top: 1.5em;
}
I coded the same as on your example website, hope it helps: http://jsfiddle.net/yL7yj4xL/1/ (You have to remove padding-right and replace it for just padding)
I'm assuming you have the nav elements in a <ul><li></li></ul> structure.
in that case, change the nav a:hover to nav li:hover
EDIT:
Made this fiddle off of your pen: https://jsfiddle.net/djgsgqp5/
Your nav ul and li elements were getting no height. If you hover on those elements in the devtools youl see they only have a width.
The style in the fiddle is much more stable hopefully does what you need.
Hope that helps!
How can one get the underline to only apply to the a element and not to the content of the :after?
With the CSS below one can control the color of an :after element on :hover. However, the text-decoration cannot be changed.
Here's the jsfiddle to illustrate the problem:
http://jsfiddle.net/JfGVE/500/
Here's the CSS:
a {
color: green;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
a:after {
font-family: FontAwesome;
content: "\f061";
}
a:hover:after {
color: orange;
text-decoration: none !important;
}
Setting the pseudo-element to display: inline-block will remove the text decoration:
a:after {
font-family: FontAwesome;
content: "\f061";
display: inline-block;
}
The underline will still apply to the space in between because you have an , though — you can prevent this by offsetting the pseudo-element with a margin instead of putting hard spaces in the HTML.
afelixj has almost the best answer here, but it has a non-clickable space, even if you remove all of the actual space in the markup. To fix that, just use padding-right on the anchor to create the space to put the icon, then position it at right: 0: http://jsfiddle.net/JfGVE/591/. Inline-block treats the icon as a character, and it will wrap like text.
Add display: inline-block; to a:after
a {
color: green;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
a:after {
display: inline-block;
font-family: FontAwesome;
content: "\f061";
}
a:hover:after {
color: orange;
text-decoration: none;
}
I have these CSS definition for my buttons:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
}
In Internet Explorer 10, it gets a grey background when clicked. Why?
Just add a:active { background: none; } to your stylesheet.
Internet Explorer 10 seems to display links (anchors: i.e. <a href>), which has the property display:block; with a grey background when clicked.
You can remove this easily by inserting background-color:none; into your code. So, you should have the following code:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
background-color:none;
}
On the positive, the problem should be removed. Two negatives include that, you cannot set a background, or have an active state in Internet Explorer (i.e. a:active). Other browsers will continue to work perfectly normal/fine.
Still we could not understand what about the question is? Which background color is gray? You didn't provide your html too. I guess this bit of code would help you to change or remove the color of the links will change the behavior in each states...
a:link {color:red;}
a:visited {color:green;}
a:hover {color:blue;}
a:active {color:yellow;}
With this four colors you could check yourself and come to the conclusion... :)
I use this reset.
* {
font-family: Arial, Helvetica, sans-serif;
outline: 0;
padding: 0;
margin: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
white-space: normal;
line-height: 1;
}
hr {display: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''}
blockquote, q {quotes: "" ""}
ul {list-style-type: none}
ol {list-style-type: decimal}
a {text-decoration: none}
.clear {clear: both}
The problem is that as long as I use line-height: 1 I see an extra pixel that does not go away no matter what I do in my block links even I tried setting height, line-height, font-size for it. nothing works. Please tell me what's going on with firefox line-height.
This is my css.
.tag {
display: block;
font-size: 11px;
background: #fff;
border: 1px solid #aaa;
color: #555;
text-transform: lowercase;
padding: 3px 6px;
}
Pretty simple yea? Seems not. Firefox will create a pixel on top of text I can clearly see it its not balanced even though I set top and bottom padding the same. Someone tell me why this happens, if I remove the line-height: 1 from my reset a whole lot of other things get screwed up.
Try using line-height: normal;
This tells it to keep the same height as the text (which would seem to be the same as line-height:1 but perhaps firefox treats it differently).
I don't get it, I see no space using your CSS above, im using firefox 3.6.13
Maybe see if you can recreate a mock up of your issue on JSbin?
http://jsbin.com/ajinu3
I want to create unique styles for my links in a single particular div (So for example I want all links bold and red in the main body, but in the sidebardiv I want them blue and italic)
How do I go about it?
I have:
a:link{
color:#666666;
}
a:visited{
color:#003300;
}
a:hover{
color:#006600;
}
a:active{
color:#006600;
}
however if I put that in the sidebar div section it messes up my }'s
Use descendant selectors:
#sidebar a:link{ color:#134896; }
#sidebar a:visited{ color:#330033; }
#sidebar a:hover{ color:#942A5F; }
#sidebar a:active{ color:#6FB25C}
This is a fundamental css selector type, and you can chain as many descendant selectors as you wish, i.e.:
#content .navigation .header h1.red {
/* Properties */
}
This would match any <h1 class="red"> that is a descendant of an element with class header, that is a descendant of an element with class navigation that is an descendant of the element with id content.
Descendant selectors is one of the few selector types that actually works across browsers, so you can rely on them. It should be noted that you should have as few selectors as possible to achieve your targetting, as this will be a performance boost. Also, try not to specify the element type if you can avoid it (this is contradictory to the advice for JavaScript selectors), since it will tie your css to how the html looks now. A developer can decide to change a <span class="highlight"> to an <em class="highlight"> later, which would break a span.highlight-selector, while a .highlight-selector would continue to work.
a:link { font-weight: bold; color: #F00 }
#sidebar a { color: #00F; font-style: italic;}
#sidebar a:visited { color: #003300; }
#sidebar a:hover { color: #006600 }
#sidebar a:active { color: #006600 }
#divId a:link{ color:#666666; }
div#div_id a:link {style}
Repeat this as many times as you like for each div, and :visited, :active, :hover states.
a { font-weight: bold; color: red; }
#sidebardiv a { color: blue; font-weight: normal; font-style: italic; }