CodeGym/Adesua ahorow/Frontend SELF TW/裝飾性的偽元素

裝飾性的偽元素

開放

9.1 偽元素 ::before 和 ::after

偽元素 ::before::after 是 CSS 中很強大的工具,它們允許在不改變 HTML 的情況下在元素內容之前或之後添加裝飾性元素。它們廣泛應用於創建視覺效果、改善用戶界面和為元素添加樣式。

描述:

  • ::before: 偽元素,添加在元素內容之前
  • ::after: 偽元素,添加在元素內容之後

語法:

element::before {
  /* 為偽元素設置的樣式 before */
}

element::after {
  /* 為偽元素設置的樣式 after */
}

主要屬性

偽元素 ::before::after 幾乎可以包含任何 CSS 屬性,包括顏色、大小、定位、背景、陰影等等。然而,要讓偽元素可見,必須為它設置內容和大小。

  • content: 設置偽元素的內容。可以是文字或圖片,也可以是空字符串
  • display: 設置偽元素的顯示類型。通常使用 blockinline-block
  • position: 控制偽元素的定位(例如,absoluterelative
  • widthheight: 設置偽元素的尺寸

9.2 添加文本

通過使用 content 屬性,可以輕鬆地在任何元素的開始或結尾添加文本。

CSS
.example::before {
  content: "開始: ";
  color: blue;
}

.example::after {
  content: " :結束";
  color: red;
}
HTML
<body>
  <p class="example">這是一個示例文本</p>
</body>

代碼說明:

  • .example::before: 在元素內容之前添加文字 "開始: " 並將其顏色設為藍色
  • .example::after: 在元素內容之後添加文字 " :結束" 並將其顏色設為紅色

9.3 裝飾線

還可以添加裝飾線來框住內容:

CSS
.decorative-line::before,
.decorative-line::after {
  content: "";
  display: block;
  height: 2px;
  background: black;
  margin: 10px 0;
}
HTML
<body>
  <div class="decorative-line">帶有裝飾線的文本</div>
</body>

代碼說明:

  • .decorative-line::before: 在元素內容之前創建裝飾線
  • .decorative-line::after: 在元素內容之後創建裝飾線

9.4 插入圖標

不夠文字?那麼很容易就可以插入幾個圖標:

CSS
.icon::before {
  content: url('https://via.placeholder.com/20');
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
HTML
<body>
  <p class="icon">帶有圖標的文本</p>
</body>

代碼說明:

  • .icon::before: 使用圖片的 URL 在文本之前添加圖標

9.5 複雜的裝飾元素

我們再來加一些複雜的裝飾:

CSS
.complex-decor::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, #f06, transparent);
  position: absolute;
  top: -10px;
  left: -10px;
}

.complex-decor {
  position: relative;
  padding: 20px;
  background: #eee;
  margin: 20px;
}
HTML
<body>
  <div class="complex-decor">帶有裝飾角的元素</div>
</body>

代碼說明:

  • .complex-decor::before: 使用漸變和絕對定位在主要內容前創建裝飾元素
  • .complex-decor: 設定父元素的相對定位,以便偽元素可以相對於它進行定位

9.6 使用動畫

甚至可以添加動畫效果:

CSS
.animated::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: red;
  animation: rotate 5s infinite;
  margin: 20px auto;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
HTML
<body>
  <div class="animated"></div>
</body>

代碼說明:

  • .animated::before: 創建一個方形的偽元素並利用關鍵幀動畫旋轉它
1
任務
Frontend SELF TW,  等級 19課堂 3
上鎖
使用偽元素的文本
使用偽元素的文本
1
任務
Frontend SELF TW,  等級 19課堂 3
上鎖
裝飾線
裝飾線
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言