在时间轴上有一个小气泡.title::before元素，当我把它复制到我们的CMS时，它完全消失了。我查看了所有的类属性，还没能弄清楚是什么覆盖了深色背景气泡。为了避免冲突，我给所有东西都起了一个唯一的类名，但我似乎不知道哪里出了问题。我把代码复制到了这个帖子上。这个问题的页面链接可以在这里找到->https://www.harpercollege.edu/dev/whoward-dev-area/timeline.php
* {
font-family: nimbus-sans-n4, nimbus-sans, "Helvetica Neue", Helvetica, Arial, "Droid Sans", sans-serif;
letter-spacing: -.3px!important;
}
/* Timeline Container */
.timeline {
background: var(--primary-color);
margin: 20px auto;
padding: 20px;
}
/* timeline-card container */
.timeline-card {
position: relative;
max-width: 600px;
font-size: 1em;
}
/* setting padding based on even or odd */
.timeline-card:nth-child(odd) {
padding: 30px 0 30px 30px;
}
.timeline-card:nth-child(even) {
padding: 30px 30px 30px 0;
text-align: right;
}
/* Global ::before */
.timeline-card::before {
content: "";
position: absolute;
width: 50%;
border: dotted #036;
}
/* Setting the border of top, bottom, left */
.timeline-card:nth-child(odd)::before {
left: 0px;
top: -4.5px;
bottom: -4.5px;
border-width: 5px 0 5px 5px;
border-radius: 50px 0 0 50px;
}
/* Setting the border of top, bottom, right */
.timeline-card:nth-child(even)::before {
right: 0;
top: 0;
bottom: 0;
border-width: 5px 5px 5px 0;
border-radius: 0 50px 50px 0;
}
/* Removing the border if it is the first timeline-card */
.timeline-card:first-child::before {
border-top: 0;
border-top-left-radius: 0;
}
/* Removing the border if it is the last timeline-card and it's odd */
.timeline-card:last-child:nth-child(odd)::before {
border-bottom: 0;
border-bottom-left-radius: 0;
}
/* Removing the border if it is the last timeline-card and it's even */
.timeline-card:last-child:nth-child(even)::before {
border-bottom: 0;
border-bottom-right-radius: 0;
}
/* timeline-information about the timeline */
.timeline-info {
display: flex;
flex-direction: column;
background: #fff;
color: #000;
border-radius: 10px;
padding: 20px;
padding-top: 0;
padding-bottom: 0;
}
/* Title of the timeline-card */
.title {
color: #036;
position: relative;
}
/* Timeline dot */
.title::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #6eb43f;
border-radius: 999px;
border: 8px solid #b3d597;
}
/* text right if the timeline-card is even */
.timeline-card:nth-child(even) > .timeline-info > .title {
text-align: right;
}
/* setting dot to the left if the timeline-card is odd */
.timeline-card:nth-child(odd) > .timeline-info > .title::before {
left: -60px;
}
/* setting dot to the right if the timeline-card is odd */
.timeline-card:nth-child(even) > .timeline-info > .title::before {
right: -60px;
}<div class="timeline">
<div class="outer">
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2009</h2>
<h3>Harper Joins Achieving the Dream (ATD)</h3>
<p>Harper Joins Achieving the Dream (ATD) Recognizing not enough students were completing the credentials they had come to earn, Harper joins the Achieving the Dream national network to help develop a student-focused culture that promotes student success. </p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2013</h2>
<h3>Leader College</h3>
<p>Harper earns Achieving the Dream’s Leader College distinction, a national designation awarded to community colleges that commit to improving
student success and closing achievement gaps.</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2015</h2>
<h3>Harper Promise Scholarship Program Launches</h3>
<p>Harper launches the Promise Scholarship providing area high school students with the opportunity to earn up to two years of tuition at Harper if meet attendance, academic and community service requirements. Designed with its high school and business partners, Promise is a collective approach to promoting life skills and behaviors that help students succeed in college, the workplace and beyond</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2016</h2>
<h3>Leah Meyer Austin Award</h3>
<p>Achieving the Dream selects Harper for the prestigious Leah Meyer Austin Award for outstanding achievement in developing an organizational culture designed and dedicated to increasing student success.</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2017</h2>
<h3>Harper Meets 10,604 Goal Earl</h3>
<p>Harper reaches 102% of its 10,604 goal three years early, granting an additional 10,792 degrees and certificates since 2010.</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2018</h2>
<h3>University Center Opens</h3>
<p>Harper teams with four-year university partners to open the University Center and make completing a bachelor’s degree more accessible. DePaul, Northern Illinois, Roosevelt and Southern Illinois universities bring more than 10 programs, faculty and student service staff to Harper’s campus</p>
</div>
</div>
<div class="timeline-card">
<div class="timeline-info">
<h2 class="title">2019</h2>
<h3>Addressing Students’ Basic Needs</h3>
<p>Recognizing the connection between student finances and student success, Harper begins to holistically assess student financial wellness and
develop strategic recommendations.</p>
</div>
</div>
</div>
</div>https://www.harpercollege.edu/dev/whoward-dev-area/timeline.php
这是由bootstrap引起的。Box-sizing属性需要设置为content-box，而不是border-box。