Css a:hover:after:nth-child 1,2,3,4,5 content in dropdown navbar not displaying

I created a simple navbar and I would love to add some css-nth-child:before to the menu depending on the main category

The dropdown navbar has 5 different categories:

News, Politics, Economy, Health and Education

Each category has its own subcategories with region names like this:

Europe, Asia, Africa, Oceania, North America and South America

What I want is:
when people put their mouse over (hover) lets say category: Politics, and the mouse is over the Politics sub-categories, on hover I want to display like this:

Politics news from Europe
Politics news from Asia
Politics news from Africa
etc

But if the mouse is over (hover) the category Economy and the mouse is over the Economy sub-categories, on hover I want to display like this:

Economy news from Europe
Economy news from Asia
Economy news from Africa
etc

What I tried is the following CSS

    sub-categories a:hover:after:nth-child(2)  
{content: 'Politics news from • ';
sub-categories a:hover:after:nth-child(3)  
{content: 'Economy news from • ';
sub-categories a:hover:after:nth-child(4)  
{content: 'Health news from • ';

But it is not working

Here is the HTML

<main-categories><a href="#void"><strong>▪</strong>News</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<main-categories><a href="#void"><strong>▪</strong>Politics</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<main-categories><a href="#void"><strong>▪</strong>Economy</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<main-categories><a href="#void"><strong>▪</strong>Health</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>

and the CSS is

main-categories 
{position:relative;display:block;
text-align:left;width:92%;margin:0 auto;overflow:hidden;}
main-categories a 
{position:relative;margin:0 auto;display:block;
font-size:15px;text-transform:uppercase;
text-align:left;padding:12px 0 12px 0;width:100%;
border-bottom:1px dotted #121212;overflow:hidden}
main-categories a:last-child 
{border:0}	
main-categories a:hover 
{text-decoration:none;
color:#FFFFFF;background-color:#121212;padding-left:13px;}
main-categories:last-child 
{border:0}
sub-categories {display:none;position:relative;width:90%;
left:50%;transform:translatex(-50%);
text-align:left;overflow:hidden}
sub-categories a 
{display:block;font-size:15px;color:#121212;
text-transform:capitalize;padding:10px 0 10px 0;text-align:left;
border-bottom:1px dotted #121212}
sub-categories a:hover 
{color:#FFFFFF;background-color:#121212;padding-left:20px;}
sub-categories a:last-child
{border-bottom:1px dotted #121212}	
main-categories:hover sub-categories 
{display:block}
sub-categories a:before{content: '• ';}
sub-categories a:hover:after:nth-child(1) 
{content: 'News from • ';
sub-categories a:hover:after:nth-child(1) 
{content: 'Politics from • ';
sub-categories a:hover:after:nth-child(1) 
{content: 'Economy from • ';

I also created a Codepen to see it live

https://codepen.io/familias/pen/XWygWzY

Are you working in an IDE? Because your last CSS is broken and missing closing brackets. Working in an IDE would help you out a lot.

You can achieve this effect by using the nth-of-type() operater on main-categories. Example:

main-categories:nth-of-type(1) sub-categories a:hover:before {
content: '• News from ';
}
main-categories:nth-of-type(2) sub-categories a:hover:before {
content: '• Political news from ';
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

main-categories {
position:relative;
display:block;
text-align:left;
width:92%;
margin:0 auto;
overflow:hidden;
}
main-categories a {
position:relative;
margin:0 auto;
display:block;
font-size:15px;
text-transform:uppercase;
text-align:left;
padding:12px 0 12px 0;
width:100%;
border-bottom:1px dotted #121212;
overflow:hidden
}
main-categories a:last-child {
border:0
}
main-categories a:hover {
text-decoration:none;
color:#FFFFFF;
background-color:#121212;
padding-left:13px;
}
main-categories:last-child {
border:0
}
sub-categories {
display:none;
position:relative;
width:90%;
left:50%;
transform:translatex(-50%);
text-align:left;
overflow:hidden
}
sub-categories a {
display:block;
font-size:15px;
color:#121212;
text-transform:capitalize;
padding:10px 0 10px 0;
text-align:left;
border-bottom:1px dotted #121212
}
sub-categories a:hover {
color:#FFFFFF;
background-color:#121212;
padding-left:20px;
}
sub-categories a:last-child {
border-bottom:1px dotted #121212
}
main-categories:hover sub-categories {
display:block
}
sub-categories a:before{
content: '• ';
}
main-categories:nth-of-type(1) sub-categories a:hover:before {
content: '• News from ';
}
main-categories:nth-of-type(2) sub-categories a:hover:before {
content: '• Political news from ';
}

<!-- language: lang-html -->

<main-categories><a href="#void"><strong>▪</strong>News</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<main-categories><a href="#void"><strong>▪</strong>Politics</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<main-categories><a href="#void"><strong>▪</strong>Economy</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>
<main-categories><a href="#void"><strong>▪</strong>Health</a>
<sub-categories>
<a href="#">Sweden</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</sub-categories>
</main-categories>

<!-- end snippet -->