Let's break down and fix the issues you're facing step by step:

1. Why aren't the ::before/::after pseudo-elements showing up? #

The main problem here is that your parent container div[type="timeline/slideshow"] doesn't have position: relative set. When you use position: absolute on pseudo-elements, they need a positioned ancestor (any position value except static) to anchor themselves to. Without this, the pseudo-elements will position relative to the entire document, which is why they're not appearing where you expect.

Additionally, your ::after pseudo-element has an invalid color value: #red isn't a valid CSS color. You should use red or the hex value #ff0000 instead.

2. How to make sections overlay the pseudo-element line #

Your sections already have a high z-index: 100, but we need to ensure the pseudo-elements have a lower z-index to let the sections sit on top. We'll add z-index: 1 to both pseudo-elements to enforce this hierarchy.

Also, note that your section uses a semi-transparent background (#b3e5fc2b). If you want to completely hide the underlying line, you can switch to an opaque background color like #b3e5fc. If you prefer to keep the transparency, the line will show through slightly—adjust based on your design needs.

Modified Working Code #

CSS #

/* Add relative positioning to the parent container */
div[type="timeline/slideshow"] {
  position: relative;
}

div[type="timeline/slideshow"] > section { 
  margin: auto; 
  width: 900px; 
  z-index: 100; 
  border-left: 4px solid #00BCD4; 
  min-height:250px; 
  background-color: #b3e5fc; /* Opaque background to fully cover the line (adjust as needed) */
  border-radius: 4px; 
  margin-bottom: 55px; 
  position: relative; 
  top: 50px; 
  box-shadow: rgb(136, 136, 136) 3px 3px 1px; 
  -webkit-animation: fadein 2s; 
  -moz-animation: fadein 2s; 
  -ms-animation: fadein 2s; 
  -o-animation: fadein 2s; 
  animation: fadein 2s; 
}

div[type="timeline/slideshow"]::before { 
  content: ""; 
  position: absolute; 
  top: 70px; 
  left: 50%; 
  bottom: 0; 
  width: .2rem; 
  background: #dcdcdc; 
  z-index: 1; /* Lower z-index to let sections overlay */
}

div[type="timeline/slideshow"]::after { 
  content: ""; 
  position: absolute; 
  top: 70px; 
  left: 50%; 
  bottom: 0; 
  width: .2rem; 
  background: red; /* Fixed invalid color value */
  z-index: 1;
}

/* Add missing fadein animation definitions */
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-moz-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-ms-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-o-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

HTML #

<div type="timeline/slideshow">
 <section class='sectionDiv'>
 <header>Title </header>
 <article>Content</article>
 </section>
 <section class='sectionDiv'>
 <header>Title </header>
 <article>Content</article>
 </section>
 <section class='sectionDiv'>
 <header>Title </header>
 <article>Content</article>
 </section>
 <section class='sectionDiv'>
 <header>Title </header>
 <article>Content</article>
 </section>
</div>

Key Fixes Recap #

• Added position: relative to the parent div to anchor the pseudo-elements correctly.
• Fixed the invalid color value in ::after.
• Set a lower z-index on pseudo-elements to ensure sections overlay the line.
• Added missing fadein animation definitions (your original code only referenced the animation but didn't define it).

内容的提问来源于stack exchange，提问作者HELP