here's the link to the JSFiddle where I am attempting to organize the code.
I am looking to increase the spacing between Text_2a and Text_2b. Initially, I adjusted the .li class:
line-height: calc(1em + 1.5vw); was modified to line-height: calc(2em + 1.5vw);
However, this change also affected the gap between Text_2a and Text_1, whereas I intended for it to remain unchanged.
Can you assist me in identifying what I might be doing incorrectly?
Below is the snippet of code:
<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
<li><span class="example">Text_2a</span></li>
<li><span class="example_translated">Text_2b</span></li>
</ul>
</ol>
</div>
.meanings_and_examples {
display: flex;
flex-direction: column;
}
.meaning {
width: auto;
text-align: left;
color: #1f2c60;
font-size: calc(0.5em + 2.3vw);
}
ol.circle {
position: relative;
list-style-type: none;
padding-left: 3em;
margin-left: 1vw;
border: 2px solid purple;
}
li {
line-height: calc(1em + 1.5vw);
}
ol.circle > li {
position: relative;
counter-increment: item;
margin-top: 1.5%;
border: 2px solid orange;
}
ol.circle > li::before {
position: absolute;
transform: translateX(-150%);
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.1em + 1.5vw);
background: #1f2c60;
color: white;
}
ul {
list-style-type: none;
padding-left: 0;
margin-top: 1%;
}
.example {
width: auto;
text-align: left;
border: 2px solid green;
}
.example_translated {
width: auto;
text-align: left;
color: #5d78e5;
border: 2px solid red;
}