::first-line
요소의 첫 번째 줄을 선택한다.
<p>
안녕하세요<br>
반갑습니다
</p>
<p>
안녕하세요<br>
반갑습니다
</p>p::first-line{
color:red;
}결과값 :
::first-letter
요소의 첫 번째 문자를 선택한다.
p::first-letter{
color:red;
}결과값 :
::before, ::after
내용의 앞과 뒤에 콘텐츠를 추가하고, 이 콘텐츠는 content=""라는 속성으로 정의한다.
인라인 요소이다.
홈페이지 헤더나 푸터에 구분선을 삽입할 때
컨텐츠 주변의 디자인적 요소를 추가할 수 있을 때
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>practice</title>
<style>
body{
width:100vw;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
position:relative;
width:50vw;
height:20vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container::before{
content:"";
display: block;
width:50px;
height:50px;
border-top:3px solid #000;
border-left:3px solid #999;
position: absolute;
top:0;
left:0;
}
.container::after{
content:"";
display: block;
width:50px;
height:50px;
border-bottom:3px solid #000;
border-right:3px solid #999;
position: absolute;
bottom:0;
right:0;
}
em{
font-size: 30px;
}
em::selection{
background-color:red;
color:#fff;
}
.container span{
display: block;
}
</style>
</head>
<body>
<div class="container">
<em>::before, ::after 태그 활용</em>
<span>가상 요소를 이용해 헤더 푸터의 구분선을 넣거나, 꾸미는 용도로 사용할 수 있다.</span>
</div>
</body>
</html>
::selection
마우스로 드래그 했을 때 선택한 텍스트의 스타일 지정
반응형