<div class="box"> <div class="title">::before, ::after</div> <div>특정 요소의 앞이나 뒤에 지정한 내용(텍스트 또는 이미지)을 추가할 수 있습니다.</div> </div>
.box { max-width: 550px; padding: 32px 36px; box-sizing: border-box; margin: 0 auto; text-align: center; position: relative; } .box::before { content: ""; width: 26px; height: 26px; border-top: 6px solid #CECECE; border-left: 6px solid #4A4A4A; position: absolute; top: 0; left: 0; } .box::after { content: ""; width: 26px; height: 26px; border-bottom: 6px solid #CECECE; border-right: 6px solid #4A4A4A; position: absolute; bottom: 0; right: 0; } .title { font-weight: 600px; line-height: 1.8; font-size: 26px; }