3a 3aafter en css

1span[data-descr] {
2  position: relative;
3  text-decoration: underline;
4  color: #00F;
5  cursor: help;
6}
7
8span[data-descr]:hover::after,
9span[data-descr]:focus::after {
10  content: attr(data-descr);
11  position: absolute;
12  left: 0;
13  top: 24px;
14  min-width: 200px;
15  border: 1px #aaaaaa solid;
16  border-radius: 10px;
17  background-color: #ffffcc;
18  padding: 12px;
19  color: #000000;
20  font-size: 14px;
21  z-index: 1;
22}

1The ::after selector inserts something after the content of each 
2selected element(s) (ie: after <p> tag or .addEndingText class).*/
3
4/* Example: 
5Insert some text after the content of each <p> element:*/
6p::after { 
7  content: " - Remember this";
8}
9
10/*NOTE: IE8 and Opera 4-6 only support the old, single-colon CSS syntax 
11(:after). Newer versions support the standard, double-colon syntax 
12(::after).*/
13Source:www.w3schools.com
148
15after cssCSS By Creepy Gábor on Jan 4 2021 Comment
16p:after{ 
17    content: " -Read more… ";
18    color:black;