티스토리 글 작성자 표시

코드 변경 전

HTML 코드

<div id="head">
    <h2><a href=""></a></h2>
    <div class="date"></div>
</div>

CSS 코드

#head .date { position: absolute; bottom: -44px; left: -10px; padding: 10px; font-size: 13px; color: #fff; background-color: #555; cursor: default; }
#head .date:before { position: absolute; top: 0; left: -6px; width: 0; height: 0; content: " "; border-top: 20px solid #555; border-left: 6px solid transparent; }
#head .date:after { position: absolute; bottom: 0; left: -6px; width: 0; height: 0; content: " "; border-bottom: 20px solid #555; border-left: 6px solid transparent; }

출력 결과

코드 변경 후

HTML 코드

<div id="head">
    <h2><a href=""></a></h2>
    <!-- 저자 날짜 -->
    <div class="authordate">
        <ul></ul>
        <ul>&nbsp;|&nbsp;</ul>
        <ul></ul>    
    </div>
</div>

치환자 보기 링크

CSS 코드

/* 저자 날짜 */
#head .authordate {
    position: absolute;
    bottom: -44px;
    left: -10px;
    padding: 10px;
    font-size: 13;
    color: #fff;
    background-color: #555;
    cursor: default;
}
#head .authordate:before { position: absolute; top: 0; left: -6px; width: 0; height: 0; content: " "; border-top: 20px solid #555; border-left: 6px solid transparent; }
#head .authordate:after { position: absolute; bottom: 0; left: -6px; width: 0; height: 0; content: " "; border-bottom: 20px solid #555; border-left: 6px solid transparent; }

출력 결과