[2021/12/22]국비지원 CSS3 4-(6) 가상element before, after

psuedo-element

중 진짜 가상 element

::before : 텍스트 기준, 기준점 element의 앞에 배치
::after : 텍스트 기준, 기준점 element의 뒤에 배치
- 이미지의 경우, div가 기준점이 되고 z 축으로 볼 때 before가 앞에,
  after가 제일 밑에 깔리는 형태
  before
  기준 element
  after
  로 전개되는 것으로 이해했는데 잘 모르겠다 사실;
  이미지에 쓰는 경우는 반드시 psuedo-element에 position: absolute가 따랐기 때문에 (배운 바에 의하면)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:after</title>
    <style type="text/css">
        p{line-height: 1.6;}
        p::after{content:"가상요소";color: red;}
        p::before{content:"가상요소";color: blue;}
    </style>
</head>
<body>
    <p>
        가상의 콘텐츠를 이전(before)이나 이후(after)에 추가할 수 있는 선택자로
        content 속성에 원하는 문자열을 지정할 수 있다.
    </p>
</body>
</html>

결과물

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바