(HTML5 & CSS3) Pseudo class & Pseudo element

Pseudo class
https://www.w3schools.com/css/css_pseudo_classes.asp
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

/* 기본
selector:pseudo-class {
  property: value;
} */

많이 쓰는 클래스
: active
: checked
: disabled
: first-child
: last-child
: nth-child()
: focus
: hover
: link
: read-only
: required
: valid
: visited

.header-category-list-item:hover {
    font-weight: bold;
    color: #FF0000;
    text-decoration: underline;
}

.content-article:last-child {
    border-bottom: 0px;
}

a태그 (anchor tag)

/* 링크 스타일을 변경 */
a:link {}
/* 방문한 적이 있는 링크 스타일 변경 */
a:visited {}
/* 링크를 클릭할 때의 스타일 변경 */
a:active {}
/* 링크에 마우스를 올렸을 때 스타일 변경 */
a:hover {}

Pseudo element
https://www.w3schools.com/css/css_pseudo_elements.asp
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

/* 기본 
selector::pseudo-element {
  property: value;
}  */

많이 쓰는 클래스
: : after ( :after)
: : before ( :before)

.content-article-author::after {
    content: "|";
    padding-left: 10px;
    color: #dddddd;
}

.content-article-create-date::before {
    content: "|";
    padding-right: 10px;
    color: #DDDDDD;
}