티스토리, 구분선 만들기

Demo

[Demo] 티스토리, 구분선 만들기

Oh, my life is changing everyday In every possible way And oh, my dreams It's never quite as it seems Never quite as it seems I know I felt like this before But now I'm feeling it even more Because..

dd-stuff.tistory.com

Code

<!-- 서식 1 -->
<hr id="hst1" class="mySeparator">

<!-- 서식 2-1 -->
<hr id="hst2-1" class="mySeparator">

<!-- 서식 2-2 -->
<hr id="hst2-2" class="mySeparator">

<!-- 서식 3 -->
<hr id="hst3" class="mySeparator">

<!-- 서식 4-1 -->
<p id="hst4-1" class="mySeparator">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<!-- 서식 4-2 -->
<p id="hst4-2" class="mySeparator">&harrw;&harrw;&harrw;&harrw;&harrw;</p>

<!-- 서식 5 -->
<p id="hst5" class="mySeparator">&bull;</p>

<!-- 서식 6 -->
<hr id="hst6" class="mySeparator">

<!-- 서식 7 -->
<div id="hst7" class="mySeparator">
    <p>&bull;</p>
    <p>&bull;</p>
    <p>&bull;</p>
</div>

<!-- 서식 8 -->
<div id="hst8" class="mySeparator">
    <p>&#10073;</p>
    <p>&#10073;</p>
    <p>&#10073;</p>
</div>

/* 사용중인 스킨에 따라 수정이 필요할 수 있음 */

.mySeparator, p.mySeparator { margin:60px auto !important }

#hst1 { width:90%; height:2px; border:0; background-image:linear-gradient(to right, transparent, rgba(255, 0, 0, 0.5), transparent) }

#hst2-1 { width:90%; height:0px; border:0; border-top:1px solid rgba(255, 0, 0, 0.3); border-bottom:1px solid rgba(255, 0, 0, 0.3); overflow:visible; padding:0; color:rgba(255, 0, 0, 0.5); text-align:center }
#hst2-1::after { content:'◇'; display:inline-block; position:relative; top:-14px; font-size:20px; padding:0 12px; color:rgba(255, 0, 0, 0.7); background:rgba(255, 255, 255, 1) }

#hst2-2 { width:90%; height:0px; border:0; border-top:1px dashed rgba(255, 0, 0, 0.3); border-bottom:1px dashed rgba(255, 0, 0, 0.3); overflow:visible; padding:0; color:rgba(255, 0, 0, 0.5); text-align:center }
#hst2-2::after { content:'\2702'; display:inline-block; position:relative; top:-14px; font-size:20px; padding:0 12px; color:rgba(255, 0, 0, 0.7); background:rgba(255, 255, 255, 1) }

#hst3 { width:90%; height:2px; border:0; background-image:linear-gradient(to right, transparent, rgba(255, 0, 0, 0.5), transparent); text-align:center }
#hst3::after { content:'◇'; display:inline-block; position:absolute; left:50%; transform:translateX(-50%); margin-top:-14px; font-size:20px; color:rgba(255, 0, 0, 0.7); padding:0 12px; background:rgba(255, 255, 255, 1) }

#hst4-1 { text-align:center; padding:0 5%; text-decoration-line:line-through; text-decoration-style:wavy; text-decoration-color:rgba(255, 0, 0, 0.5) }

#hst4-2 { text-align:center; font-size:30px; letter-spacing:-6px; color:rgba(255, 0, 0, 0.5) }

#hst5 { color:rgba(255, 0, 0, 0.5); font-size:30px; text-align:center }
#hst5::before { content:'\2022'; font-size:30px; color:rgba(255, 0, 0, 0.5); margin-right:50px }
#hst5::after { content:'\2022'; font-size:30px; color:rgba(255, 0, 0, 0.5); margin-left:50px }

#hst6 { width:16%; height:0px; border:0; border-top:2px solid rgba(255, 0, 0, 0.3); border-bottom:2px solid rgba(255, 0, 0, 0.3); border-radius:5px }

#hst7 { width:100%; height:fit-content }
#hst7 p { color:rgba(255, 0, 0, 0.5); font-size:30px; text-align:center }
#hst7 > p:not(:nth-child(1)) { margin-top:-20px !important }

#hst8 { width:100%; height:fit-content }
#hst8 p { color:rgba(255, 0, 0, 0.5); font-size:30px; text-align:center }
#hst8 > p:not(:nth-child(1)) { margin-top:-27px !important }

@media screen and (max-width:860px) {
    #hst4-2 { letter-spacing:-17px; margin-left:-18px !important }

    #hst5::before { margin-right:25px }
    #hst5::after { margin-left:25px }

    #hst6 { width:25% !important }

    #hst8 > p:not(:nth-child(1)) { margin-top:-21px !important }
}