Css custom list style with unaligned vertical position and curved arrow in list style
I have an html structure like this:
<div class="details">
<p class="title">Title</p>
<ul>
<li> Test 1 </li>
<li> Test 2 </li>
<li> Test 3 </li>
<li> Test 4 </li>
<li> Test 5 </li>
<li> Test 6 </li>
</ul>
</div>
I want the list style not to be vertically aligned, but to have a heading in the middle pointing to each list something like this:
Is there anyway to keep the styling similar to the image above and keep it responsive?
source to share
There are many ways to achieve this, with images, background image, SVG graphics, etc. Here's a simple, albeit CSS-heavy example.
.details {
position: relative;
}
.details p {
display: inline-block;
left: 0;
margin: -.5em 0 0 0;
position: absolute;
top: 50%;
}
.details li {
list-style-type: none;
position: relative;
}
.details li::after {
content: "▶";
font-size: 11px;
left: -8px;
line-height: 100%;
position: absolute;
top: 5px;
}
.details li::before {
border: 0 solid transparent;
content: "";
height: 12px;
left: -25px;
position: absolute;
width: 22px;
}
.details li:nth-child(1)::before,
.details li:nth-child(2)::before,
.details li:nth-child(3)::before {
border-radius: 30px 0 0 0;
border-top: 3px solid #000;
top: 8px;
}
.details li:nth-child(4)::before,
.details li:nth-child(5)::before,
.details li:nth-child(6)::before {
border-bottom: 3px solid #000;
border-radius: 0 0 0 30px;
bottom: 7px;
}
.details li:nth-child(1) {
left: 10px;
}
.details li:nth-child(2) {
left: 25px;
}
.details li:nth-child(2)::before {
height: 10px;
}
.details li:nth-child(3) {
left: 30px;
}
.details li:nth-child(3)::before {
height: 7px;
}
.details li:nth-child(4) {
left: 25px;
}
.details li:nth-child(4)::before {
height: 7px;
}
.details li:nth-child(5) {
left: 15px;
}
.details li:nth-child(5)::before {
height: 10px;
}
.details li:nth-child(6) {
left: 0;
}
<div class="details">
<p class="title">Title</p>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul>
</div>
<p>
vertically centered, although the arrow shapes do not change based on the number of items. This can be achieved either with a custom class or some sort of selector magic.
Edit: To center the block .details
horizontally text-align
won't work. Here's how to do it:
.details {
position: relative;
}
.details p {
display: inline-block;
left: 0;
margin: -.5em 0 0 0;
position: absolute;
text-align: right; /**/
top: 50%;
width: 50%; /**/
}
.details ul {
padding-left: 50%; /**/
}
.details li {
list-style-type: none;
position: relative;
}
.details li::after {
content: "▶";
font-size: 11px;
left: -8px;
line-height: 100%;
position: absolute;
top: 5px;
}
.details li::before {
border: 0 solid transparent;
content: "";
height: 12px;
left: -25px;
position: absolute;
width: 22px;
}
.details li:nth-child(1)::before,
.details li:nth-child(2)::before,
.details li:nth-child(3)::before {
border-radius: 30px 0 0 0;
border-top: 3px solid #000;
top: 8px;
}
.details li:nth-child(4)::before,
.details li:nth-child(5)::before,
.details li:nth-child(6)::before {
border-bottom: 3px solid #000;
border-radius: 0 0 0 30px;
bottom: 7px;
}
.details li:nth-child(1) {
left: 10px;
}
.details li:nth-child(2) {
left: 25px;
}
.details li:nth-child(2)::before {
height: 10px;
}
.details li:nth-child(3) {
left: 30px;
}
.details li:nth-child(3)::before {
height: 7px;
}
.details li:nth-child(4) {
left: 25px;
}
.details li:nth-child(4)::before {
height: 7px;
}
.details li:nth-child(5) {
left: 15px;
}
.details li:nth-child(5)::before {
height: 10px;
}
.details li:nth-child(6) {
left: 0;
}
<div class="details">
<p class="title">Title</p>
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul>
</div>
Most of the CSS is the same, I only added three lines marked /**/
. Hope this helps.
source to share