css实现“点击查看更多”

html代码：

<!--查看更多-->

<header>
    <input type="checkbox"id="12">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet eius fugit illum impedit iste repellat sunt veritatis! Cum impedit, inventore laudantium mollitia natus officia quae quidem tenetur vero. A alias blanditiis consequatur dignissimos distinctio ducimus, ea enim error hic iure laborum magni molestias natus nobis non odio perferendis possimus quod repellendus sed sit soluta tempora voluptates! Aliquam consequuntur delectus doloribus dolorum sequi ullam ut. Aperiam earum enim eos illum ipsa maiores maxime nobis quaerat repellendus sed? Aspernatur autem, commodi corporis cum dolor doloremque eaque eos est in inventore ipsa iusto libero molestias nesciunt, odio quae quas reprehenderit similique, unde.</p>
    <label for="12">
        <img src="../img/3d.png" alt="">
        <span>查看更多</span>
    </label>
</header>

css代码

/*查看更多*/header>input{    display: none;}/*超出高度的文字隐藏*/p{    height: 40px;    overflow: hidden;}/*图片旋转*/header>input:checked~label>img{  transform: rotate(180deg);}/*文字全都显示*/header>input:checked+p{    height: auto;}