<ul class="menu">
<!-- (li.item>((.item-header>lipsum1)+(.item-body>lipsum5)+(.item-aside>lipsum10)))*10 -->
<li class="item">
<div class="item-header">Lorem.</div>
<div class="item-body">Lorem ipsum dolor sit amet.</div>
<div class="item-aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, vitae.</div>
</li>
<li class="item">
<div class="item-header">Nesciunt.</div>
<div class="item-body">Sit doloremque repellat natus libero.</div>
<div class="item-aside">Pariatur quibusdam voluptas, vero accusamus itaque. Neque magni autem sunt.</div>
</li>
<li class="item">
<div class="item-header">Animi!</div>
<div class="item-body">Similique voluptas, sint quam eligendi.</div>
<div class="item-aside">Unde repudiandae, mollitia voluptatum similique repellendus eum. Ut, quae! Deleniti.</div>
</li>
<li class="item">
<div class="item-header">Fugiat?</div>
<div class="item-body">Ducimus eaque nulla vitae numquam.</div>
<div class="item-aside">Ut saepe vel eius velit necessitatibus odit quia nisi cupiditate!</div>
</li>
<li class="item">
<div class="item-header">Sed?</div>
<div class="item-body">Molestiae quas placeat ad autem?</div>
<div class="item-aside">Quibusdam labore magni laboriosam quas repellat ullam, in sequi rem.</div>
</li>
<li class="item">
<div class="item-header">Libero.</div>
<div class="item-body">Id reiciendis nihil laboriosam dolor?</div>
<div class="item-aside">Laborum praesentium recusandae, aliquam iste ad! Nam ipsa voluptatum laborum?</div>
</li>
<li class="item">
<div class="item-header">Porro.</div>
<div class="item-body">Nobis quae aut ullam error.</div>
<div class="item-aside">Voluptate iure, quos tempora dolor officia illum voluptatum praesentium ducimus.</div>
</li>
<li class="item">
<div class="item-header">Dolor.</div>
<div class="item-body">Perferendis ad officia, enim doloribus.</div>
<div class="item-aside">Minus sed rem vel commodi eos sint hic architecto consequatur.</div>
</li>
<li class="item">
<div class="item-header">In?</div>
<div class="item-body">Eum iste labore quo inventore.</div>
<div class="item-aside">Ratione asperiores autem deleniti iste rerum nesciunt iusto quos, quidem.</div>
</li>
<li class="item">
<div class="item-header">Amet.</div>
<div class="item-body">Ex nam hic temporibus quaerat.</div>
<div class="item-aside">Aliquid commodi nam id tempora, placeat quo, ex cupiditate alias.</div>
</li>
</ul>
* {
box-sizing: border-box;
}
.menu {
margin: 15px 10%;
}
.item {
display: flex;
position: relative;
margin-bottom: 15px;
line-height: 1.6;
word-wrap: break-word;
}
.item-header {
width: 2 / 12 * 100%;
padding: 0 10px;
text-align: right;
font-weight: bold;
}
.item-body {
flex: 1;
width: 10 / 12 * 100%;
margin-right: 4 / 12 * 100%;
padding: 10px;
background-color: #fafafa;
&:hover + .item-aside {
z-index: 1;
opacity: 1;
}
}
.item-aside {
width: 4 / 12 * 100%;
position: absolute;
z-index: -1;
top: 0;
right: 0;
padding-left: 10px * 2 + 1px;
padding-right: 10px;
opacity: 0;
transition: all 400ms;
// left line
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 10px;
border-left: 1px #ddd solid;
}
&:hover {
z-index: 1;
opacity: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.