纯css 实现右下角内容展开/收起功能

一、实现效果

展开收起按钮可以替换为文字（展开/收起）

二、功能实现

<div class="more-wrapper">
    <input type="checkbox" id="exp" />
    <div class="more-text">
        <label class="more-btn" for="exp"></label>
        据外交部网站消息，外交部发言人耿爽主持今日例行记者会耿爽新冠肺炎疫情在全球扩散蔓延给海外中国公民的健康安全带来持续威胁。我们奉劝这些美国政客把心思和精力多放在抗击疫情和维护美国人民生命安全和身体健康上，而不是一门心思想着如何去转移视线、推卸责任。
    </div>
</div>

  .more-wrapper {
            padding: 4px 12px;
            border-radius: 4px;
            border: 1px solid #C9CDD4;
            box-sizing: border-box;
            background: #F7F8FA;
            display: flex;

            .more-text {
                overflow: hidden;
                line-height: 1.5;
                max-height: 3em;
                justify-content: space-between;

                &::before {
                    content: '';
                    float: right;
                    width: 0;
                    height: calc(~"100% - 20px");
                    /*100%减去一个按钮的高度即可*/
                }

                &::after {
                    content: '';
                    width: 100%;
                    height: 100%;
                    position: absolute;
                }
            }

            .more-btn {
                float: right;
                clear: both;
                color: blue;
                cursor: pointer;
                position: relative;
                padding-left: 6px;

                &::before {
                    content: '...';
                    color: #333;
                    font-size: 14px;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    transform: translateX(-100%);
                }

                &::after {
                    content: '展开';
                    height: 20px;
                    width: 20px;
                    display: inline-block;
                    /*这两行删除按钮即为文字 */
                    text-indent: -99999px;
                    background: url('../images/arrow-right1.png') no-repeat center;
                }

            }

            #exp:checked+.more-text {
                -webkit-line-clamp: 999;
                max-height: none;
            }

            #exp:checked+.more-text .more-btn::after {
                content: '收起';                
                transform: rotate(-90deg);
                height: 20px;
                width: 20px;
                display: inline-block;
                /*这两行删除按钮即为文字 */
                text-indent: -99999px;
                background: url('../images/arrow-right1.png') no-repeat center;
            }

            #exp:checked+.more-text .more-btn::before {
                visibility: hidden;
            }

            #exp:checked+.more-text::after {
                visibility: hidden;
            }
        }