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

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>