pseudo Element.css🔴

가상요소(Pseudo Element) 선택자에 추가하는 키워드 선택한 요소의 지정된 부분에 스타일 적용

선택자::before

특정 요소의 컨텐츠 앞에 다른 요소를 삽입

.required-sign::before {
  content: '*';
  color: #f00;
}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_pseudoElement</title>
  <link rel="stylesheet" href="./11.css">
</head>
<body>
  <form action="">
    <label for="account" class="required-sign">ID : </label>
    <input type="text" name="account" id="account">
    <br>
    <label for="password" class="required-sign">PW : </label>
    <input type="password" name="password" id="password">
    <br>
    <label for="name">NAME : </label>
    <input type="name" name="name" id="name">
    <br>
  </form>
</body>
</html>

선택자::after

특정 요소의 컨텐츠 뒤에 다른 요소를 삽입

.required-sign::after{
  content: '*';
  color: #f00;
}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_pseudoElement</title>
  <link rel="stylesheet" href="./11.css">
</head>
<body>
  <form action="">
    <label for="account" class="required-sign">ID : </label>
    <input type="text" name="account" id="account">
    <br>
    <label for="password" class="required-sign">PW : </label>
    <input type="password" name="password" id="password">
    <br>
    <label for="name">NAME : </label>
    <input type="name" name="name" id="name">
    <br>
  </form>
</body>
</html>