我正在努力实现这个目标，但我不知道如何做到这一点。我的解决方案是 错了，但我不知道任何不同的解决方案。我需要多个 ：在我的li标签中的标签之前，因为点和数字是相同的 李：之前，我不能改变数字的位置。你能帮助我吗， 请？我的代码在这里：
/* Experiences */
ol.experiences li {
padding-left: 33px;
margin-bottom: 2.5em;
list-style: none;
}
.where {font-weight: 700; }
.description {margin-top: 0.5em;}
ol.experiences li {
position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
/* use padding-bottom instead of margin-bottom.*/
margin-bottom: 0; /* This overrides previously specified margin-bottom */
padding-bottom: 2.5em;
counter-increment: custom;
}
ol.experiences li:before {
position: absolute;
left: -11px;
background-image: linear-gradient(to bottom, #e5d192 12%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 2px 16px;
background-repeat: repeat-y;
padding: 2px;
height: 100%;
width: 1px;
z-index: -24;
display: inline-block;
}
ol.experiences li:before {
content: counter(custom) " ";
left: -61px;
background-color: white;
padding: 0 5px;
font-size: 39px;
color: #cba425;
}
ol.experiences li:first-child:before {
/* first li's line */
top: 6px; /* moves the line down so that it disappears under the bullet. Adjust manually */
}
ol.experiences li:last-child:before {
/* last li's line */
height: 6px; /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}
ol.experiences li:first-child {
counter-reset: custom;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container">
<ol class="experiences">
<!-- Experience -->
<li>
<div class="where">Self-Reflaction</div>
<p class="description">Define a manager's strong points and their areas of development.</p>
</li>
<li>
<div class="where">Purpose</div>
<p class="description">Having identified your primary abilities and motivations, we'll use our tailored expertise to pinpoint the industries, teams and roles in which you!ll be able to unite the two.</p>
</li>
<li>
<div class="where">Achievement</div>
<p class="description">Action plan to get you towards the current market hiring trends.</p>
</li>
<li>
<div class="where">Actualization</div>
<p class="description">Art of getting what you want, negotiation and communication.</p>
</li>
</ol>
</div>
答案 0 :(得分：0)
您还可以使用flex绘制一个填充整个高度的容器，然后从那里绘制点（或display:table/table-cell）。
你也可以使用<hx>作为标题而不是div，并将标题/文本包装成div或者其他有意义的标签......对于那种情况下的样式是有用的。）
ol {
counter-reset: oli;
list-style-type: none;
padding: 0em;
}
li {
counter-increment: oli;
padding: 0;
margin: 0;
}
li:before {
font-size: 1.75em;
font-weight: bold;
color: gold;
text-shadow: 0 0 1px lighhtgray;
margin: 0;
content: counter(oli);
width: 2em;
flex-shrink: 0;
margin:0 0.5em;
text-align: center;
background: repeating-linear-gradient(to top, gold, gray, gold, transparent 4px, transparent 10px) 50% bottom repeat-y;
background-size: 3px auto;
box-shadow: inset 0 1.6em white
}
li:last-of-type:before {
background: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<ol class="experiences w100">
<!-- Experience -->
<li class="green d-flex flex-nowrap">
<div>
<h2 class="where">Self-Reflaction</h2>
<p class="description">Define a manager's strong points and their areas of development.</p>
</div>
</li>
<li class="green d-flex flex-nowrap">
<div>
<h2 class="where">Purpose</h2>
<p class="description">Having identified your primary abilities and motivations, we'll use our tailored expertise to pinpoint the industries, teams and roles in which you!ll be able to unite the two.</p></div>
</li>
<li class="green d-flex flex-nowrap">
<div>
<h2 class="where">Achievement</h2>
<p class="description">Action plan to get you towards the current market hiring trends.</p></div>
</li>
<li class="green d-flex flex-nowrap">
<div>
<h2 class="where">Actualization</h2>
<p class="description">Art of getting what you want, negotiation and communication.</p></div>
</li>
</ol>