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.
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: "";
}
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>
a:hover:before - can't seem to understand what it does?
What a:hover::before
essentially does, is when you hover on the <a>
tag, the following styles are applied to a psuedo element before the <a>
tag.
The psuedo-selector ::after
does the same, but it puts the content after the tag by default, rather than before.
Consider the following snippets:
a:hover { background: red; color: white; }
<a>hello</a>
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
In CSS:
span:after {
content: attr(data-content) ' any other text you may want';
}
If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
In CSS:
span.change:after {
content: attr(data-content) ' any other text you may want';
}
How to make a hover effect for pseudo elements?
You can change the pseudo-element based on hover of the parent:
JSFiddle DEMO
#button:before {
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
}
#button:hover:before {
background-color: red;
}
#button { display: block; height: 25px; margin: 0 10px; padding: 10px; text-indent: 20px; width: 12%;}
#button:before { background-color: blue; content: ""; display: block; height: 25px; width: 25px;}
#button:hover:before { background-color: red;}
<div id="button">Button</div>
Unknown pseudo-element or pseudo-class :hover
Double check your validation rules, testing here I get no errors, using CSS 2.1:
http://jigsaw.w3.org/css-validator/
If you're testing CSS 1.0 compliance, you'll get your exact error, since :hover
wasn't in CSS 1.0, it was added in 2.0.
Only detect click event on pseudo-element
This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.
If you must have a click handler on the red region only, you have to make a child element, like a span
, place it right after the opening <p>
tag, apply styles to p span
instead of p:before
, and bind to it.
SASS :after :hover selector
Use &:hover:after {}
for targeting the after
pseudo-element of the element being hovered over.
&:after:hover {}
would select the after
pseudo-element and used on hover it.
Related Topics
How to Easily Horizontally Center a ≪Div≫ Using Css
Select Elements by Attribute in Css
Footer At Bottom of Page or Content, Whichever Is Lower
Css Floating Divs At Variable Heights
Align ≪Div≫ Elements Side by Side
Remove Padding from Columns in Bootstrap 3
How to Wrap or Truncate Long Strings in a Material-Ui Expansionpanelsummary
Add Footer Text in Each Page of Pdf Using CSS
How to Set the Size of a Column in a Bootstrap Responsive Table
Why It Is Not Taking 100% Height in Material Design
Bootstrap 4 Carousel Responsive (Image and Text)
Align an Image and Some Text on the Same Line Without Using Div Width
Overriding the Encapsulated CSS of External Component
How to Get the Footer to Stay At the Bottom of a Web Page
Canvas Is Stretched When Using CSS But Normal With "Width"/"Height" Properties
What's the Difference Between Display:Inline-Flex and Display:Flex