[티스토리] 더보기 스타일

아래 더보기를 눌러주세요.

 

더보기를 펼쳤을 때 나오는 내용입니다.

CSS 스타일 편집을 통해 변경하였습니다.

감사합니다.

 

 

아래는 더보기 스타일에 적용한 CSS 코드입니다.

 

/* 더보기 스타일 시작 */
.btn-toggle-moreless, .btn_more, .btn_less {
    background: #000; /* 버튼 배경색 */
}
.btn-toggle-moreless, .btn_more, .btn_less {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 3px 12px; /* 버튼 안쪽 패딩 */
    border-radius: 24px; /* 버튼 둥근 정도 */
    margin-top: 5px;
    color: #fff!important; /* 버튼의 더보기 글씨색 */
    font-size: 14px!important; /* 버튼의 글씨크기 */
}
div[data-ke-type='moreLess'] {
	position:relative;
}
div[data-ke-type='moreLess']::before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 2px dashed #e0e0e0;
    margin-top: 22.5px;
}
.moreless-content {
    padding: 15px 5px;
		background: #fbfbfb; /* 컨텐츠 배경색 */
    border-bottom: 2px dashed #e0e0e0;
}
.btn-toggle-moreless:before, .btn_more:before {
    content: '✚';/* 버튼이 접혀있을 때 앞에 붙일 아이콘 */
    margin-right: 5px;
}
.open .btn-toggle-moreless:before, .btn_less:before {
    content: '✖'; /* 버튼을 닫을 때 앞에 붙일 아이콘 */
    margin-right: 5px;
}
/* 더보기 스타일 끝 */