CSS after before 属性不起作用？

Question

这里我在 css 中使用了 after 和 before 标签。 这是我的股利。 我不知道为什么我不工作之后。 一切正常，但我的前后工作不正常。 我希望我的 div 在行之前显示。 请帮我解决这个问题。

我的代码

div[type="timeline/slideshow"] > section {
        margin: auto;
        width: 900px;
        z-index: 100;
        border-left: 4px solid #00BCD4;
        min-height:250px;
        background-color: #b3e5fc2b;
        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;
    }
    div[type="timeline/slideshow"]::after
    {
        content: "";
        position: absolute;
        top: 70px;
        left: 50%;
        bottom: 0;
        width: .2rem;
        background: #red;
    }

<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>

.

Answer 1

试试这个。我添加了固定高度(等于底部边距)、删除了顶部样式并更新了底部样式。还将 css 应用于 section::after。

https://codepen.io/dragosmicu/pen/yKXQNw?editors=1100

div[type="timeline/slideshow"]>section::after
{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -55px;
    width: .2rem;
    background: red;
    height: 55px;
}