html - CSS 底部 :0 not working when creating timeline?

Question

这是我想要创建的所需时间线 https://codepen.io/paulhbarker/pen/apvGdv .

让我解释一下我的方法。我正在创建一个“ul”，并且每条时间线都在该无序列表的“li”内，类名为“card”。这里，“li”设置为相对位置，“card”设置为绝对位置。然后我选择每个奇数“li”并将“card”转换为左侧，如果是偶数“li”，我将“card”转换为右侧。直到这里，它才像我期望的那样工作。

我在 li 中使用“:after”伪选择器并在“bottom:0”位置添加一个圆形针点。我正在向 li 添加一定的宽度、背景颜色和填充以创建一条线。问题是我希望我的卡片出现在圆形针点的位置，即“li”的“:after”伪选择器的“bottom:0”。但是卡片在精确点之上。

HTML:

 <section id="timeline">
           <ul>
               <li>
                   <div class="card">
                        <div class="card-heading color--blue">
                            <div class="card-number">
                                <span>01</span>
                            </div>
                            <div class="heading-description">
                                <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                            </p>
                            <img src="http://placehold.it/1000x500" alt="Graphic">
                        </div>
                   </div>
               </li>
               <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
           </ul>
       </section>

CSS:

#timeline{
    margin-top:300px;
}
body{
    background-color: rgb(223, 219, 219);
}

#timeline ul li{
    list-style: none;
    position: relative;
    width: 6px;
    /* padding-top: different for even and off */
    margin: 0 auto;
    background: #fff;
}

#timeline ul li:after{
    content:'';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    bottom:0;
    background: inherit;
    transform: translateX(-40%);
}

.card img{
    width: 100%;
}
.card{
    position: absolute;
    width:370px;
    height:380px;
    bottom:0;
    background-color: #FFFFFF;
    box-sizing: border-box;
    font-family: "Roboto";
}

.card .card-heading{
    box-sizing: border-box;
    width:100%;
    height:80px;
    padding:15px 0px 15px 20px;
    display: flex;
    position: relative;
}

.card .card-heading .card-number{
    background-color: #3A99C2;
    box-sizing: border-box;
    width:55px;
    height:50px;
    color:white;
    font-size:35px;
    font-weight: bold;
    padding:5px 0px 0px 10px;
}

/* Timeline setting for odd element */

#timeline li:nth-child(odd) .card{
    transform: translateX(-120%);
}

#timeline li:nth-child(odd){
    padding-top: 400px;
}

#timeline li:first-child{
    padding-top: 100px;
}
#timeline li:nth-child(odd) .card .card-heading:before{
    content:'';
    position: absolute;
    right:-3%;
    top:34%;
    border-left:14px solid transparent;
    border-left-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   


/* Timeline even */
#timeline li:nth-child(even) .card .card-heading:before{
    content:'';
    position: absolute;
    left:-3%;
    top:34%;
    border-right:14px solid transparent;
    border-right-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   
#timeline li:nth-child(even) .card{
    transform: translateX(20%);
}
#timeline li:nth-child(even){
    padding-top: 100px;
}




.card .card-heading .heading-description{
    color:white;
    display: inline;
    letter-spacing: 2px;
    margin: -20px 0px 0px 10px;
    line-height: 1.5rem;
}

.card .card-body{
    padding:0px 15px 15px 15px;
}
.card .small{
    font-size:17px;
    font-weight: normal;
}

.color--blue{
    background-color: #46B8E9;
    border-color:#46B8E9;
}

Answer 1

所以你需要它是一个 :before 而不是 :after 并且还删除了 li 上的一些边距。看看我是如何更新的

#timeline{
    margin-top:300px;
}
body{
    background-color: rgb(223, 219, 219);
}

#timeline ul li{
    list-style: none;
    position: relative;
    width: 6px;
    /* padding-top: different for even and off */
    margin: 0 auto;
    background: #fff;
}

#timeline ul li:before{
    content:'';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-top: 30px;
    background: inherit;
    transform: translateX(-40%);
}

.card img{
    width: 100%;
}
.card{
   
    width:370px;
    height:380px;
    bottom:0;
    background-color: #FFFFFF;
    box-sizing: border-box;
    font-family: "Roboto";
}

.card .card-heading{
    box-sizing: border-box;
    width:100%;
    height:80px;
    padding:15px 0px 15px 20px;
    display: flex;
    position: relative;
}

.card .card-heading .card-number{
    background-color: #3A99C2;
    box-sizing: border-box;
    width:55px;
    height:50px;
    color:white;
    font-size:35px;
    font-weight: bold;
    padding:5px 0px 0px 10px;
}

/* Timeline setting for odd element */

#timeline li:nth-child(odd) .card{
    transform: translateX(-120%);
}

#timeline li:nth-child(odd){
    padding-top: 100px;
}

#timeline li:first-child{
    padding-top: 0px;
}
#timeline li:nth-child(odd) .card .card-heading:before{
    content:'';
    position: absolute;
    right:-3%;
    top:34%;
    border-left:14px solid transparent;
    border-left-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   


/* Timeline even */
#timeline li:nth-child(even) .card .card-heading:before{
    content:'';
    position: absolute;
    left:-3%;
    top:34%;
    border-right:14px solid transparent;
    border-right-color:inherit;
    border-top:14px solid transparent;
    border-bottom:14px solid transparent;
}   
#timeline li:nth-child(even) .card{
    transform: translateX(20%);
}
#timeline li:nth-child(even){
    padding-top: 100px;
}




.card .card-heading .heading-description{
    color:white;
    display: inline;
    letter-spacing: 2px;
    margin: -20px 0px 0px 10px;
    line-height: 1.5rem;
}

.card .card-body{
    padding:0px 15px 15px 15px;
}
.card .small{
    font-size:17px;
    font-weight: normal;
}

.color--blue{
    background-color: #46B8E9;
    border-color:#46B8E9;
}

    <section id="timeline">
           <ul>
               <li>
                   <div class="card">
                        <div class="card-heading color--blue">
                            <div class="card-number">
                                <span>01</span>
                            </div>
                            <div class="heading-description">
                                <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                            </p>
                            <img src="http://placehold.it/1000x500" alt="Graphic">
                        </div>
                   </div>
               </li>
               <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
            <li>
                <div class="card">
                     <div class="card-heading color--blue">
                         <div class="card-number">
                             <span>01</span>
                         </div>
                         <div class="heading-description">
                             <h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
                         </div>
                     </div>
                     <div class="card-body">
                         <p class="card-text">
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
                         </p>
                         <img src="http://placehold.it/1000x500" alt="Graphic">
                     </div>
                </div>
            </li>
           </ul>
       </section>