CSS入門-Day10：偽元素
更新於 2024/08/08閱讀時間約 5 分鐘
偽元素介紹
偽元素（Pseudo-elements）是一種特殊的 CSS 選擇器，用於選擇和樣式化文檔中特定部分的內容。與偽類不同，偽元素可以創建和樣式化文檔中並不存在的元素。
常見偽元素
::before
::before 偽元素在選擇器的內容之前插入內容。通常與 content 屬性配合使用。
p::before {
content: "Before: ";
color: blue;
}
::after
::after 偽元素在選擇器的內容之後插入內容。同樣需要配合 content 屬性使用。
p::after {
content: " After";
color: red;
}
::first-line
::first-line 偽元素樣式化選擇器的第一行文字。
p::first-line {
font-weight: bold;
color: green;
}
::first-letter
::first-letter 偽元素樣式化選擇器的第一個字母。
p::first-letter {
font-size: 2em;
color: orange;
}
::selection
::selection 偽元素樣式化用戶選取的文本部分。
::selection {
background: yellow;
color: black;
}
偽元素實踐
我們將通過一些示例來實踐偽元素的基本用法。
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>偽元素示例</title>
<style>
.example::before {
content: "★ ";
color: blue;
}
.example::after {
content: " ★";
color: red;
}
.example::first-line {
font-weight: bold;
color: green;
}
.example::first-letter {
font-size: 2em;
color: orange;
}
::selection {
background: yellow;
color: black;
}
</style>
</head>
<body>
<p class="example">這是一個示例段落，用於展示偽元素的基本用法。</p>
</body>
</html>
在這個例子中，.example 段落應用了一些偽元素樣式：
- 使用
::before和::after在段落內容前後插入星號。 - 使用
::first-line樣式化段落的第一行文字。 - 使用
::first-letter樣式化段落的第一個字母。 - 使用
::selection樣式化用戶選取的文本部分。
高級偽元素用法
除了基本用法，偽元素還可以用於一些高級的排版和樣式設計。例如，創建自定義引號、實現複雜的圖形效果等。
自定義引號
blockquote::before {
content: open-quote;
font-size: 2em;
color: gray;
vertical-align: -0.4em;
}
blockquote::after {
content: close-quote;
font-size: 2em;
color: gray;
vertical-align: -0.4em;
}
複雜圖形效果
.button {
position: relative;
padding: 10px 20px;
border: 2px solid #3498db;
color: #3498db;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
font-weight: bold;
transition: all 0.3s ease;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3498db;
z-index: -1;
transition: all 0.3s ease;
transform: scaleX(0);
transform-origin: right;
}
.button:hover::before {
transform: scaleX(1);
transform-origin: left;
}
.button:hover {
color: #fff;
}
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。