Combine :after with :hover
Just append :after
to your #alertlist li:hover
selector the same way you do with your #alertlist li.selected
selector:
#alertlist li.selected:after, #alertlist li:hover:after
{
position:absolute;
top: 0;
right:-10px;
bottom:0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #303030;
content: "";
}
Combine :after with :hover for text-decoration of a font icon
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.
How can I write a ':hover' condition for 'a:before' and 'a:after'?
This depends on what you're actually trying to do.
If you simply wish to apply styles to a :before
pseudo-element when the a
element matches a pseudo-class, you need to write a:hover:before
or a:visited:before
instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.
If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before
and a:visited::before
. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.
This specific order of pseudo-classes and pseudo-elements is stated in the spec:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.
However, for user-action pseudo-classes such as :hover
1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a
element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover
to an actual child element instead of a pseudo-element.
1 Of course, this does not apply to link pseudo-classes such as :visited
as in the question, since pseudo-elements aren't links.
How can i use hover effect on after element with css?
check out this demo below. I think you are missing content
property.
the Red
div
is created using :after
and changes its color on hover.
the selector:after:hover
won't work.
.car { position: relative; width: 100px; height: 100px; background: yellow;}
.car:hover { background: skyblue;}
.car:after { content: ''; width: 50px; height: 50px; position: absolute; right: 0; bottom: 0; background: green;}
.car:hover:after { background: red;}
<div class="car"></div>
How to combine :hover with :not()?
The following works pretty normal for me,
.some {
&.is-current { color: blue }
&:not(.is-current):hover { color: red }
}
and the output is
.some.is-current {
color: blue;
}
.some:not(.is-current):hover {
color: red;
}
just like you expect, which works fine:
.some.is-current { color: blue }
.some:not(.is-current):hover { color: red }
<span class="some">One</span> · <span class="some is-current">One</span>
Is it correct to combine active and hover pseudo selector like a:active:hover.?
Both are fine (and identically equivalent). I've just tested in Firefox 4.0b6/Mac and it works exactly as I would expect. In the below example, the link turns red when I point at it, and then green while I hold the mouse button down.
<!DOCTYPE HTML>
<title>Test</title>
<style>
a:hover { color: red; }
a:active { color: yellow; }
a:hover:active { color: green; }
</style>
<h1><a href="test">gggg</a></h1>
It is unusual to want a link to be styled differently when activated with the mouse than with the keyboard though.
I suspect you may be making a classic mistake. :active
means "While being activated (e.g. while the mouse button is depressed over it)" and not "When the href attribute's value resolves to the URI of the current page".
There is no pseudo-class that means "When the href attribute's value resolves to the URI of the current page", for that the classic pattern is to add a "current" or "selected" class to the anchor on the server before sending the HTML to the client.
Is there any way to active after pseudo-element while same element being hovered?
You're close but the way you've written it causes the li:after
to override li:hover
You can combine the two.
li:hover:after { ... }
- changes the after pseudo-class when the li hovers.
li:after:hover { ... }
- would only change the pseudo-class when the after itself is hovered.
Remember you should add these AFTER you define the default state just like any other hover definition.
:hover effect on p:after in specific div
If i understand correctly - it's the same p you hover you want to manipulate.
So. It's the .parent p:hover p:after
it's wrong with.
:hover
and :after
should be appended onto each other
like this:
.parent p:hover:after {
width: 2em;
}
Related Topics
Ordering of Vendor-Specific CSS Declarations
What Does A[Href^="..."] Do in Css
In CSS Difference Between "." and "#" When Declaring a Set of Styles
How to Clear the Cache of Nginx
Css: Center Element Within a ≪Div≫ Element
100Vw Causing Horizontal Overflow, But Only If More Than One
How to Make CSS Visible Only For Opera
Ie11 - Does a Polyfill/Script Exist For CSS Variables
When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag
@Font-Face Anti-Aliasing on Windows and Mac
Relationship Between !Important and CSS Specificity
Browser Support For CSS Page Numbers
Wave (Or Shape) With Border on Css3
Resize Font-Size According to Div Size
How to Select an Nth Child Without Knowing the Parent Element
How to Change Btn Color in Bootstrap