19. Css 가상 클래스 before, after

728x90

ㅁ 나는 제목입니다.

폼 엘리먼트는 before, after을 가질 수 없다.

input, form, button

ex1)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>after before 연습</title>
    <style>
        ul {
            list-style: none;  
        }
        ul li:before {
            content: "*";
            margin-right: 10px;
            color: dodgerblue;
        }
        ul li:after {
            content: "주문불가";
            margin-left: 10px;
            color: white;
            background-color: crimson;
            border-radius: 5px;
            font-size: 12px;
            padding: 1px 5px;       
        }
    </style>
</head>
<body>
    <img src="https://placehold.it/250x150" >
    <ul>
        <li>마요</li>
        <li>카레</li>
        <li>철판볶음밥</li>
        <li>프리미엄 찌개</li>
        <li>덮밥</li>
        <li>비빔밥</li>
    </ul>
</body>
</html>

ex2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>breadcrumb</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .breadcrumb a {
            text-decoration: none;
            color: black;
        }
        
        .breadcrumb a:hover,.breadcrumb a:focus  {
            text-decoration: none;
            color: red;
        }
    
        .breadcrumb a:after {
            content: '\f105';
            font-family: 'fontawesome';
        }
        .breadcrumb a:last-of-type:after {
            content: '';
        }
        
    </style>
</head>
<body>
    <div class="breadcrumb">
        <a href="#">홈</a>
        <a href="#">전체메뉴</a>
        <a href="#">사각도시락</a>
        <a href="#">모둠시리즈</a>
    </div>
</body>
</html>

저작자표시 비영리 변경금지

'2019백업' 카테고리의 다른 글

자바스크립트 - Array (0)	2019.07.23
20. 자손 선택자(space) VS 자식 선택자 (>) (0)	2019.07.22
18. overflow속성 (0)	2019.07.22
예제 - CSS 수직, 수평 중앙정렬 시키는 방법 (0)	2019.07.22
예제 - CSS 화면 가득 채우기 (0)	2019.07.22

'2019백업' 카테고리의 다른 글

티스토리툴바