在愛心代碼中間添加文字

HTML愛心代碼是我們常?？吹降囊环N表達愛心的方式，但是如果我們想在愛心中添加一些文字該怎么辦呢？下面是一種實現方法：

<div class="love">
	<span>I ♥ YOU</span>
</div>
<style>
.love{
	position:relative;
	text-align:center;
	margin:50px auto 0;
	width:100px;
	height:100px;
}
.love:before,
.love:after{
	position:absolute;
	content:"";
	left:50px;
	top:0;
	width:50px;
	height:80px;
	background:#FC0;
	-moz-border-radius:50px 50px 0 0;
	-webkit-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%;
}
.love: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%;
}
.love span{
	display:block;
	position:relative;
	top:40px;
	font-size:20px;
	font-weight:bold;
	color:#fff;
	text-shadow:0 -1px 1px #333;
}
</style>

通過給愛心的外面再包裹一個div，然后在這個div中添加一個span標簽來放置文字內容。CSS中，設置愛心的總體樣式為relative，寬高為100px，上下居中，愛心是通過:before和:after兩者實現的，使其旋轉45度，之后再修改愛心位置，讓中間空出空間用于放置文字，并設置文字的樣式。

這樣我們就可以在HTML愛心代碼中間加上文字了，你也可以根據需要修改樣式，實現各種不同的效果。