before는 말그대로
body에 있는 p태그의 앞에다가 텍스트를 붙여주는 기능
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::before{
content:"앞에다가 추가할 텍스트";
}
</style>
</head>
<body>
<p>
내 앞에 글자 생겼나요?
</p>
</body>
</html>
after는 말그대로
body에 있는 p태그 뒤에다가 텍스트 붙여주는 기능
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p::after{
content:"뒤에다가 붙는 텍스트";
}
</style>
</head>
<body>
<p>
원래쓰인내용
</p>
</body>
</html>
'프론트엔드 > css' 카테고리의 다른 글
| [유노코딩 css 20강] z-index는 쌓기다. (0) | 2023.08.04 |
|---|---|
| [유노코딩 css 19강] 속성값을 물려받기 inheritance(상속) (0) | 2023.08.04 |
| [유노코딩 css 17강] hover,active,focus,disabled,nth-child() (0) | 2023.08.04 |
| [유노코딩 css 16강] 특성선택자,자식선택자,형제선택자 (0) | 2023.08.04 |
| [유노코딩 css 14강] 레이아웃을 유연하게 flexbox (0) | 2023.08.04 |
