How to put a hover effect to an after content is css? - html

Question

I want to show a div named dot-menu when hover the after content of h1. I have tried the following code but did't work.
h1{
font-size: 20px;
font-weight: 400;
color: #3d3d3d;
margin-top:50px
}
h1:after{
content: "\22EE";
float: right;
font-size: 35px;
padding-right: 20px;
}
.dot-menu{
float: right;
background-color: #3d3d3d;
color: #FFFFFF;
font-size: 16px;
padding: 10px;
font-weight: 400;
font-family: "Montserrat Light", "Open Sans";
position: relative;
top:-10px;
opacity:0;
}
h1:after:hover .dot-menu{
opacity:1;
}
<h1>Henry Little</h1><h3 class="dot-menu">about</h3>

Answer 1

Your selector h1:after:hover .dot-menu is wrong.
This selector will look for .dot-menu element that is descendant of h1 but this is not the case. And 2nd you can't select another element on hover of a pseudo element.
You will need to change your code a bit. Consider the following HTML:
<h1>Henry Little
<span class="icon">&vellip;</span>
<span class="dot-menu">about</span>
</h1>
Make menu opener and menu both child elements of same parent. Then you can show menu on hover of icon with Sibling (+ ) selector.
h1 .icon:hover + .dot-menu{
opacity:1;
}
h1{
font-size: 20px;
font-weight: 400;
color: #3d3d3d;
margin-top:50px;
position: relative;
}
h1:after {
display: block;
clear: both;
content: '';
}
h1 .icon {
float: right;
font-size: 35px;
padding-right: 20px;
position: relative;
cursor: pointer;
}
.dot-menu {
float: right;
background-color: #3d3d3d;
color: #FFFFFF;
font-size: 16px;
padding: 10px;
font-weight: 400;
font-family: "Montserrat Light", "Open Sans";
position: relative;
top:30px;
opacity:0;
right: 0;
}
h1 .icon:hover + .dot-menu{
opacity:1;
}
<h1>Henry Little
<span class="icon">&vellip;</span>
<div class="dot-menu">about</div>
</h1>

Answer 2

See this just after making the .dot-menu a child of h1 it is working.
h1{
font-size: 20px;
font-weight: 400;
color: #3d3d3d;
margin-top:50px
}
h1:after{
content: "\22EE";
float: right;
font-size: 35px;
padding-right: 20px;
}
.dot-menu{
float: right;
background-color: #3d3d3d;
color: #FFFFFF;
font-size: 16px;
padding: 10px;
font-weight: 400;
font-family: "Montserrat Light", "Open Sans";
position: relative;
top:-10px;
opacity:0;
}
h1:hover .dot-menu{
opacity:1;
}
<h1>Henry Little<span class="dot-menu">about</span></h1>