Clickable icon with pseudo elements - html

Question

EDIT:
I came across this code:
add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'attribute_pa_'.$name;
if( $taxonomy == 'attribute_pa_staat' )
$label = $label . ' info<i class="fa fa-question"></i> ' );
return $label;
}
But it doesn't work (yet) how can I make it work?
See the page I'm trying this on here:
https://dev.pctoppers.nl/product/dell-latitude-e5550-refurbished/
End of edit
I'm trying to create an icon with a specific ID so I can link a popup to it.
I want to do this with a ::after pseudo element (if possible). We have products with different grades that we want to add an extra explanation to.
This is the code I've tried:
[data-value="a-grade"]::after {
content:"\f05a\f05a";
font-family: "Font Awesome 6 Duotone"!important;
padding:0px!important;
margin:0px!important;}
This unfortunately doesn't work and puts the icon behind the text instead of on-top of the small window its in. See screenshot below
The most ideal look would be this:
The blue circle being the icon.
Is there any way of achieving this? Keep in mind that it needs its own #ID so I can link a popup.
Thanks in advance!

Answer 1

With CSS property position (absolute and relative) you can make it.
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
/* Top right text */
.top-right {
font-size:2rem;
position: absolute;
top: -5px;
right: -5px;
background: red;
border-radius:40px;
height:10px;
width:10px;
}
<div class="w">
<div class="top-right">*</div>
<div class="txt">text</div>
</div>
Update with pseudo element
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
[data-value="a-grade"]::after {
content:"!";
font-family: "Font Awesome 6 Duotone"!important;
font-size:2rem;
position: absolute;
top: -15px;
right: -5px;
}
<div class="w" >
<div classs="top-right" data-value="a-grade"></div>
<div class="txt">text</div>
</div>