css - 我想使用行高重叠两行文本 - 最前面的行

Question

我需要重叠两行文本，但希望第二行位于第一行下方。这怎么可能使用 css？

http://jsfiddle.net/vkpv9ua0/

   body {
	font-size:30px;
	font-family:"bebas-neue", Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	background:#50ACFF;
	font-weight:bold;
	
}

.red-text {
	color:#c14345;
	padding-left: 50px;
    text-indent:-50px;
	
}

p.logo::first-line { 
    z-index:99999;

	 color:#FFFFFF;
	
}


p {
	z-index:-9999;
	

}

p.logo {
	line-height:20px;
}

<p class="logo">
<span class="white-text"> CAT | DOG </span><br> <span class="red-text">FISHES</span>
</p>

Answer 1

这是您的开始。这就是你想要的，你只需要搞乱定位。

.red-text {
    color:#c14345;
    padding-left: 50px;
    text-indent:-50px;
    top:-30px;
    position:relative;
}

.white-text { 
    position:relative;
    z-index:99999;