How to add before or after selector in a SVG rectangle?

I am trying to create a chart with SVG and manipulate data-numbers with PHP, I want to hover when SVG rectangle shows the data-attribute. But it didn't work in ::after or ::before selector in . It is possible to put these selectors in 'rect', 'circle' or 'polyline'?

    pointer-events: all;
    content: attr(data-hover);
    display: block;
    background: #000;
    position: absolute;
    top: 100%;
    left: -7px;
    right: -7px;
    padding: 15px; 

 <svg version="1.1" id="Capa_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
 viewBox="0 0 600 570" style="enable-background:new 0 0 600 570;" xml:space="preserve">
 <style type="text/css">
.barch0{font-family:'Arial Black';}
 <text transform="matrix(1 0 0 1 130 450)" writing-mode="tb" class="barch0 barch1">JULIO</text>
  <polyline class="barch2" points="650,420 50,420 50,20 "/>
 <g transform="rotate(180 268 220)">        
   <rect data-hover="123.323" x="380" y="50" class="barch3" width="50" height="50"></rect>
 <text transform="matrix(1 0 0 1 0 350)" class="barch0 barch1">50</text>

I expect when hover in 'rect' show the data-hover attribute, I tried with ::after and ::before but neither work.

5 answers

  • answered 2019-09-21 23:21 devolasoji

    Do you mean something like this?

    You can also try :hover instead of :before and :after.

  • answered 2019-09-21 23:38 Jaylukmann

    I am not sure SVG support the regular css rules. It has its own rules which you have to work with. For details on SVG css rules,check

  • answered 2019-09-22 02:51 Dittocci

    Though they might seem similar, SVG uses slightly different rules from CSS. The ::before and ::after pseudo-elements are not supported in SVG. Check SVG and CSS for alternatives.

  • answered 2019-09-22 03:59 paramshivaay

    SVG has its own variant of CSS with slightly different rules. I believe though that SVG does not support the ::before and ::after pseudo-elements that HTML's CSS does. Check this out

  • answered 2019-09-22 20:47 Michael Mullany

    ::before and ::after pseudo elements are not supported in SVG - but may be added in a future spec. Please see the current SVG2 working draft: