CSS Heart with Text within - css

Question

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!

Answer 1

add a span element
<span id="text">Love</span>
with css
#text{
position:absolute;
z-index:3;
margin-left:35px;
margin-top:25px;
color:white;
display:block;
}
see this fiddle http://jsfiddle.net/FH9S7/

Answer 2

You can apply z-index: -1 to the :before and :after elements. It will move the heart shapes behind the text without needing an extra div.
After that, you can play around a bit with the paddings or text-align to align the text inside the heart:
http://jsfiddle.net/GolezTrol/hYEb6/1/
PS: In my fiddle I changed the id to a classname. By doing so, you can easily recycle the styling to add multiple hearts to the page.
-edit-
Maybe you'll like this one. If you are going to use an extra element, it's a bit easier to make the heart flexible in size as well:
The HTML can be (using classes again, of course):
<div class="heart">
<div class="inner">
Test
</div>
</div>
The CSS is a little bigger, but scalable:
.heart {
/* The only thing needed to change the size, are these numbers: */
width:200px;
height:200px;
}
.heart .inner {
/* Here is the styling and positioning for your text */
padding-top: 20%;
font-size: 3em;
color: white;
font-weight: bold;
}
/* The rest is default, and doesn't need to be modified, unless you want to change background color or other 'heart' properties. */
.heart .inner {
box-sizing: border-box;
width: 100%;
height: 100%;
}
.heart {
position:relative;
text-align: center;
box-sizing: border-box;
}
.heart:after,
.heart .inner:before,
.heart .inner:after {
z-index: -1;
content: "";
display: block;
position: absolute;
background-color: #F00000;
}
.heart:after {
width: 60%;
height: 60%;
left: 20%;
top: 25%;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
border-radius: 0 30% 0 0;
}
.heart .inner:before,
.heart .inner:after {
width:58%;
height:58%;
-moz-border-radius:50%;
border-radius: 50%;
top: 5.5%;
}
.heart .inner:before {
left: 0;
}
.heart .inner:after {
right: 0%;
}
And here's the fiddle showing 3 hearts of different sizes: http://jsfiddle.net/GolezTrol/hYEb6/4/

Answer 3

If you want to use position:absloute, you can do it that way:
http://fiddle.jshell.net/y9e58/
<div id="abs">name</div>
#abs{
position:absolute;
top: 30px;
left:40px;
}