Как разместить текст друг над другом на CSS?

Question

[kindle12]

Codepen

Comments

[Андрей Федоров]

Нарисуйте картинку как должно быть.

Answer 1

[devstudent]

<nav class="main-nav">
  		<ul class="product-menu">
        <li>
          <a href="#">
            <span class="">ОЧИЩЕНИЕ</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="note">для лица</span>  <span class="title">CLASSIC</span></a>
        </li>
         	<li>
             <a href="#">
               <span class="note">для лица</span><span class="title">PREMIUM</span>
            </a>
         </li>
  <li>
    <a href="#">
      <span class="">ДЛЯ ТЕЛА</span>
    </a>
 </li>
</ul>
</nav>

a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.main-nav ul {
	padding: 0;
	font-size: 0;
	text-align: center;
}
.main-nav li {
	display: inline-block;
	list-style: none;
	color: #fff;
  vertical-align:middle;
  line-height:30px;
  padding:15px 10px;
}
.product-menu li {
	background: #1a79bb;
	
}
.product-menu li a {
	display: inline-block;
        position: relative;
}
.product-menu li a span {
	font-size: 18px;
	display: block;
}
.note {
  position: absolute;
  top:-15px;
  text-alighn:center;
  right: 0;
  left: 0;
}
.title {
  position: relative;
  top:10px;
}

Comments

[devstudent]

кстати, у вас не закрыты были теги < li >

Answer 2

[bro-dev]

.main-nav li {
  vertical-align: top;}
.product-menu span {
	display: block;
}

вертикальное выравнивание отдельный вопрос.