CSS / Pseudo-element (::before, ::after)

Pseudo-element (::before, ::after)

Pseudo-element нь HTML өөрчлөхгүйгээр элементийн тодорхой хэсэгт CSS хэрэглэх буюу нэмэлт агуулга үүсгэх боломжийг олгоно. :: давхар давхар цэгтэй бичигддэгээрээ pseudo-class (:) -аас ялгагдана.

::before ба ::after

Элементийн дотор, контентийн өмнө (before) ба хойно (after) нэмэлт псевдо-элемент үүсгэнэ:

css

.element::before {
  content: ""; /* заавал байх ёстой — хоосон байж болно */
}

.element::after {
  content: "";
}

Чухал: content property байхгүй бол pseudo-element харагдахгүй. Хоосон мөр "" бичнэ.

content property-ийн утгууд

css

.element::before {
  content: ""; /* хоосон (дизайн shape-д) */
  content: "★"; /* тэмдэгт */
  content: " →"; /* текст */
  content: attr(data-label); /* HTML attribute-ийн утга */
  content: counter(item); /* тоолуур */
}

Дизайн трик жишээнүүд

1. Декоратив зураас — гарчгийн дор:

css

.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: #a78bfa;
  border-radius: 2px;
}

2. Badge — тоо дугаар:

css

.notification-icon {
  position: relative;
  display: inline-block;
}

.notification-icon::after {
  content: attr(data-count); /* HTML: data-count="3" */
  position: absolute;
  top: -6px;
  right: -6px;
  background: #f87171;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html

<div class="notification-icon" data-count="3">🔔</div>

3. Quote тэмдэгт:

css

blockquote {
  position: relative;
  padding: 24px 24px 24px 48px;
  background: #0f172a;
  border-left: 4px solid #a78bfa;
  border-radius: 0 8px 8px 0;
}

blockquote::before {
  content: "\201C"; /* Unicode: нээлтийн quote " */
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 4rem;
  color: #a78bfa;
  line-height: 1;
  font-family: Georgia, serif;
}

4. Overlay — зурган дээр харанхуй давхарга:

css

.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s;
  z-index: 1;
}

.card:hover::before {
  background: rgba(0, 0, 0, 0.4); /* hover дээр харанхуйлна */
}

::placeholder — input-ийн placeholder текст

css

.input::placeholder {
  color: #475569;
  font-style: italic;
  font-size: 14px;
}

/* Firefox-д нэмэлт хэрэгтэй байдаг */
.input::-moz-placeholder {
  opacity: 1;
}

::selection — сонгосон текст

css

/* Хэрэглэгч текст сонгоход */
::selection {
  background-color: #7c3aed;
  color: #ffffff;
}

/* Тодорхой элементэд */
.code-block::selection {
  background-color: #1e293b;
  color: #a78bfa;
}

::first-line — эхний мөр

css

/* Нийтлэлийн эхний мөрийг онцлох */
.article-body::first-line {
  font-weight: 600;
  font-size: 1.1em;
  color: #f1f5f9;
}

Бодит жишээ — custom checkbox

css

/* HTML checkbox-г нуугаад CSS-ээр custom дүрслэл хийх */
.custom-checkbox input[type="checkbox"] {
  display: none; /* оригиналыг нуух */
}

.custom-checkbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.custom-checkbox label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #475569;
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  transition: all 0.15s;
}

/* Checked төлөвт */
.custom-checkbox input:checked + label::before {
  background: #a78bfa;
  border-color: #a78bfa;
}

.custom-checkbox input:checked + label::after {
  content: "✓";
  position: absolute;
  color: white;
  font-size: 13px;
  font-weight: bold;
}

::before ба ::after-ийн нийтлэг дүрэм

css

.element::before {
  content: ""; /* заавал */
  display: block; /* эсвэл inline-block, flex */
  /* position, width, height тохируулж болно */
}

Pseudo-element-ийг position: absolute-тай хэрэглэхдээ parent-д position: relative өгнө:

css

.parent {
  position: relative; /* pseudo-element-ийн containing block болно */
}

.parent::after {
  content: "";
  position: absolute;
  /* parent-тай харьцангуй байрлана */
}

Дараагийн хичээлд:

CSS Custom property (variable) — --color-primary зарлаж, var() ашиглан дахин ашиглагдах, засахад хялбар CSS бичих арга. Dark/light theme-г variable-аар хэрхэн удирдах талаар судална.

← Өмнөх хичээлPseudo-class (:hover, :focus)Дараах хичээл →CSS Custom property (variable)