How to apply style on ::after pseudo element when hovering ::before pseudo (not the host element)?

Multi tool use
There are similar questions out there, but apparently the same like this I didn't found. So question is:
How to apply some styling on ::after pseudo element when hovering ::before pseudo (not the host element)?
Code example:
.contact {
position: relative;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: hotpink;
}
.contact::after {
content: 'Preferred contact';
font-size: 10px;
color: #fff;
padding: 5px 10px;
position: absolute;
top: 0;
right: -15px;
transform: translateX(100%);
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.contact:hover::after {
display: block;
}
<span class="contact">skype_hello85</span>
So when hovering element (span) itself - everything is fine. But I want to ::after would be shown only when ::before is hovering, not the host element itself.
Thanks for any help!
html css hover pseudo-element
add a comment |
There are similar questions out there, but apparently the same like this I didn't found. So question is:
How to apply some styling on ::after pseudo element when hovering ::before pseudo (not the host element)?
Code example:
.contact {
position: relative;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: hotpink;
}
.contact::after {
content: 'Preferred contact';
font-size: 10px;
color: #fff;
padding: 5px 10px;
position: absolute;
top: 0;
right: -15px;
transform: translateX(100%);
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.contact:hover::after {
display: block;
}
<span class="contact">skype_hello85</span>
So when hovering element (span) itself - everything is fine. But I want to ::after would be shown only when ::before is hovering, not the host element itself.
Thanks for any help!
html css hover pseudo-element
short answer: you cannot. But if you can change the html you can do it
– Temani Afif
Jan 1 at 12:11
Thanks. Yeah, I know about that. I just was interesting in if it is possible to make it without extra HTML noise.
– Eugene Khristo
Jan 1 at 12:21
Not working.::after
or::before
has no hover statements.
– Adrian Preuss
Jan 1 at 12:25
add a comment |
There are similar questions out there, but apparently the same like this I didn't found. So question is:
How to apply some styling on ::after pseudo element when hovering ::before pseudo (not the host element)?
Code example:
.contact {
position: relative;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: hotpink;
}
.contact::after {
content: 'Preferred contact';
font-size: 10px;
color: #fff;
padding: 5px 10px;
position: absolute;
top: 0;
right: -15px;
transform: translateX(100%);
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.contact:hover::after {
display: block;
}
<span class="contact">skype_hello85</span>
So when hovering element (span) itself - everything is fine. But I want to ::after would be shown only when ::before is hovering, not the host element itself.
Thanks for any help!
html css hover pseudo-element
There are similar questions out there, but apparently the same like this I didn't found. So question is:
How to apply some styling on ::after pseudo element when hovering ::before pseudo (not the host element)?
Code example:
.contact {
position: relative;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: hotpink;
}
.contact::after {
content: 'Preferred contact';
font-size: 10px;
color: #fff;
padding: 5px 10px;
position: absolute;
top: 0;
right: -15px;
transform: translateX(100%);
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.contact:hover::after {
display: block;
}
<span class="contact">skype_hello85</span>
So when hovering element (span) itself - everything is fine. But I want to ::after would be shown only when ::before is hovering, not the host element itself.
Thanks for any help!
.contact {
position: relative;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: hotpink;
}
.contact::after {
content: 'Preferred contact';
font-size: 10px;
color: #fff;
padding: 5px 10px;
position: absolute;
top: 0;
right: -15px;
transform: translateX(100%);
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.contact:hover::after {
display: block;
}
<span class="contact">skype_hello85</span>
.contact {
position: relative;
}
.contact::before {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: hotpink;
}
.contact::after {
content: 'Preferred contact';
font-size: 10px;
color: #fff;
padding: 5px 10px;
position: absolute;
top: 0;
right: -15px;
transform: translateX(100%);
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.contact:hover::after {
display: block;
}
<span class="contact">skype_hello85</span>
html css hover pseudo-element
html css hover pseudo-element
edited Jan 2 at 10:44


Nandini Venkateshan
26228
26228
asked Jan 1 at 12:06


Eugene KhristoEugene Khristo
244
244
short answer: you cannot. But if you can change the html you can do it
– Temani Afif
Jan 1 at 12:11
Thanks. Yeah, I know about that. I just was interesting in if it is possible to make it without extra HTML noise.
– Eugene Khristo
Jan 1 at 12:21
Not working.::after
or::before
has no hover statements.
– Adrian Preuss
Jan 1 at 12:25
add a comment |
short answer: you cannot. But if you can change the html you can do it
– Temani Afif
Jan 1 at 12:11
Thanks. Yeah, I know about that. I just was interesting in if it is possible to make it without extra HTML noise.
– Eugene Khristo
Jan 1 at 12:21
Not working.::after
or::before
has no hover statements.
– Adrian Preuss
Jan 1 at 12:25
short answer: you cannot. But if you can change the html you can do it
– Temani Afif
Jan 1 at 12:11
short answer: you cannot. But if you can change the html you can do it
– Temani Afif
Jan 1 at 12:11
Thanks. Yeah, I know about that. I just was interesting in if it is possible to make it without extra HTML noise.
– Eugene Khristo
Jan 1 at 12:21
Thanks. Yeah, I know about that. I just was interesting in if it is possible to make it without extra HTML noise.
– Eugene Khristo
Jan 1 at 12:21
Not working.
::after
or ::before
has no hover statements.– Adrian Preuss
Jan 1 at 12:25
Not working.
::after
or ::before
has no hover statements.– Adrian Preuss
Jan 1 at 12:25
add a comment |
1 Answer
1
active
oldest
votes
You can apply styles to elements that lay inside the first selector DOM level.
For example:
<div class="wrapper">
::before
<p>Lorem ipsum dolor</p>
::after
</div>
wrapper
class contain here p tag and two pseudo-elements (::before and ::after) and they all lay in one DOM level and styling the ::before elements devepeding on ::after element is impossible. The only way is to apply styles to wrapper
CSS class or use JS.
More information you can get here.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995298%2fhow-to-apply-style-on-after-pseudo-element-when-hovering-before-pseudo-not%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can apply styles to elements that lay inside the first selector DOM level.
For example:
<div class="wrapper">
::before
<p>Lorem ipsum dolor</p>
::after
</div>
wrapper
class contain here p tag and two pseudo-elements (::before and ::after) and they all lay in one DOM level and styling the ::before elements devepeding on ::after element is impossible. The only way is to apply styles to wrapper
CSS class or use JS.
More information you can get here.
add a comment |
You can apply styles to elements that lay inside the first selector DOM level.
For example:
<div class="wrapper">
::before
<p>Lorem ipsum dolor</p>
::after
</div>
wrapper
class contain here p tag and two pseudo-elements (::before and ::after) and they all lay in one DOM level and styling the ::before elements devepeding on ::after element is impossible. The only way is to apply styles to wrapper
CSS class or use JS.
More information you can get here.
add a comment |
You can apply styles to elements that lay inside the first selector DOM level.
For example:
<div class="wrapper">
::before
<p>Lorem ipsum dolor</p>
::after
</div>
wrapper
class contain here p tag and two pseudo-elements (::before and ::after) and they all lay in one DOM level and styling the ::before elements devepeding on ::after element is impossible. The only way is to apply styles to wrapper
CSS class or use JS.
More information you can get here.
You can apply styles to elements that lay inside the first selector DOM level.
For example:
<div class="wrapper">
::before
<p>Lorem ipsum dolor</p>
::after
</div>
wrapper
class contain here p tag and two pseudo-elements (::before and ::after) and they all lay in one DOM level and styling the ::before elements devepeding on ::after element is impossible. The only way is to apply styles to wrapper
CSS class or use JS.
More information you can get here.
answered Jan 1 at 16:58


Eugene MikhushkinEugene Mikhushkin
408
408
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995298%2fhow-to-apply-style-on-after-pseudo-element-when-hovering-before-pseudo-not%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Kf1P Hwfim6J yLn4ekiTnOZNsyXLx2
short answer: you cannot. But if you can change the html you can do it
– Temani Afif
Jan 1 at 12:11
Thanks. Yeah, I know about that. I just was interesting in if it is possible to make it without extra HTML noise.
– Eugene Khristo
Jan 1 at 12:21
Not working.
::after
or::before
has no hover statements.– Adrian Preuss
Jan 1 at 12:25