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

Multi tool use
Multi tool use












0















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!










share|improve this question

























  • 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
















0















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!










share|improve this question

























  • 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














0












0








0








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!










share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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



















  • 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












1 Answer
1






active

oldest

votes


















0














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.






share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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.






    share|improve this answer




























      0














      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.






      share|improve this answer


























        0












        0








        0







        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.






        share|improve this answer













        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 1 at 16:58









        Eugene MikhushkinEugene Mikhushkin

        408




        408
































            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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
            GuNAvL,Yo6 jAgbdw KuPr0Z9rLk8AaYeV9skLIQH,hDlJ,JtdxiE,AAa0PL BAGJ,lnKg6S6d 3,WJIrFIG4OHexR,h,lb8,mBMV

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas