1.select:after {
2 position:absolute;
3 bottom:.15em;
4 top:.15em;
5 right:.5rem;
6 content:'\2193';
7 pointer-events: none;
8}
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}
1a::after {
2 content: "whatever content you want to display";
3 /*css declaration*/
4}
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;