.content{ width: 400px; max-height: 200px; overflow: hidden; border-radius: 4px; outline: 2px dashed royalblue; } .section{ display: flex; } pre{ white-space: pre-wrap; } .content::before{ content: ''; width: 100px; height: 100%; float: left; } .btn{ float: right; width: 100px; text-align: center; position: relative; left: calc(50% - 50px); transform: translateY(-100%); cursor: pointer; } .btn::after{ content: ''; display: block; height: 34px; background-color: #666; transition: .2s background-color; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'>
</svg>") center/ 24px 24px no-repeat; } .btn:hover::after{ background-color: royalblue; } .btn::before{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; } .text{ box-sizing: border-box; width: 100%; padding: 10px 15px; float: right; line-height: 1.5; margin: 0; margin-left: -100px; font-size: 18px; color: #232323;
}
.content-check:checked+.content{
max-height: fit-content; } .content-check:checked+.content .btn{ left: auto; right: calc(50% - 50px); } .content-check:checked+.content .btn::after{ transform: scaleY(-1);
}
.text{ /* */ -webkit-mask: linear-gradient(red 150px, transparent 200px); }
发表评论 取消回复