<!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와 bofore 예제</title>
<style>
/*
- ::after와 ::before
해당요소 앞/뒤에 컨텐츠를 추가할 때 사용
- content : 요소 앞/뒤에 넣을 문자열
*/
.test::before{ content: '-'; display: inline;}
.test::after{ content: '-'; display: inline;}
.test2::before{
content: ''; width: 2px; height: 10px;
background-color: cadetblue; display: inline-block; margin-right: 10px;
}
.test2::after{ content: ''; width: 100px; height: 100px; display: inline-block;
background:url("../image/umbrella.jpg") center center;}
/* center center를 top/bottom/left/right로하니까 보여지는 사진 위치가 바뀜*/
</style>
</head>
<body>
<span class="test">스타벅스</span><br>
<span class="test2">텀블러</span>
</body>
</html>