Hyperlink style edit
- 기본 hyperlink가 별로 마음에 안들어서 수정을 해보기로 마음을 먹었다.
-
마음에 안들다기 보다는 예쁜 CSS적용된 hyperlink를 보니 마음이 움직였다ㅎㅎ..
-
기본 Link Markdown 문법
1
[link][url주소]
-
클래스 추가
1
[link][url주소?classes=클래스명,]
활용 예) Markdown
1
[link](http://google.com?classes=btn,btn-primary)
Rendered HTML
1
<a href="http://google.com" class="btn btn-primary">link</a>
- 차이를 확인해 보자
-
jekyll에 CSS적용을 하기 위해서_sass/에 scss를 만들어서_includes/styles/style.scss에 import를 해주면 된다 !! -
적용한 CSS 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.underlineFill{
position:relative;
&::before{
content:"";
background-color:#ddd;
z-index:-1;
display:block;
position:absolute;
overflow:hidden;
bottom:0;
height:2px;
width:100%;
transition: height .3s ease;
vertical-align:bottom;
}
&:hover{
&::before{
height: 100%;
}
}
}
