CSS Heart with Text within
        Posted  
        
            by 
                user3696456
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by user3696456
        
        
        
        Published on 2014-06-01T09:20:49Z
        Indexed on 
            2014/06/01
            9:24 UTC
        
        
        Read the original article
        Hit count: 231
        
css
I would like to put a name into a heart made with CSS. And I can't seem to figure out how to do it.
I have this code already:
#heart {
  position:relative;
  width:100px;
  height:100px;
}
#heart:before,#heart:after {
  position:absolute;
  content:"";
  left:50px;
  top:0;
  width:50px;
  height:80px;
  background:#F00000;
  -moz-border-radius:50px 50px 0 0;
  border-radius:50px 50px 0 0;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  -webkit-transform-origin:0 100%;
  -moz-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  -o-transform-origin:0 100%;
  transform-origin:0 100%;
}
#heart:after {
  left: 0;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-transform-origin:100% 100%;
  -moz-transform-origin:100% 100%;
  -ms-transform-origin:100% 100%;
  -o-transform-origin:100% 100%;
  transform-origin:100% 100%;
}
When I try to write the name directly into the div: "#heart", it just puts the text behind.
Thanks in advance for any help!
© Stack Overflow or respective owner