之前的财产不起作用的CSS？

Question

这里我在css中使用tag之前和之后。 这是我的div。 我不知道为什么我以后不工作。 一切都很好，但我的事后和之前都没有正常工作。 我希望我的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;
}