Clickable icon with pseudo elements

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 . ' <a href="#guide-mjattr">info<i class="fa fa-question"></i></a> ' );

    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>