資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究CSS position屬性中:before偽元素的各種技巧
通常，我們使用HTML向網頁新增內容，並使用CSS來設定內容樣式。CSS包含一些偽選擇器，例如“:before”，我們可以用它在任何HTML元素之前向網頁新增內容。
有時，開發者不想使用“:before”選擇器在HTML元素之前放置內容，而是需要對內容進行定位。例如，如果我們使用“:before”選擇器在文字前新增一個圖示，我們需要在文字和圖示之間留出空間。因此，我們需要使用CSS position屬性來更改圖示的位置。
在本教程中，我們將使用CSS position屬性的“absolute”值來相對於其父元素的位置更改內容的位置。
語法
使用者可以按照以下語法使用帶“:before”偽選擇器的position屬性。
div:before {
content: "arrow";
position: absolute;
}
在上面的語法中，我們在div元素之前添加了content值。此外，我們為content設定了position absolute，並且可以使用“left”、“right”、“top”和“bottom”CSS屬性來更改其位置。
示例1
在下面的示例中，我們建立了一個專案列表。在CSS中，我們將list-style設定為none，並將position設定為relative。之後，我們使用“:before”偽選擇器在每個列表項之前添加了一個向右的圖示。此外，我們設定了position absolute，並將“left”CSS屬性的值設定為“-50px”。
使用者可以更改“left”屬性的值，並觀察向右圖示和列表項之間的間距。
<html>
<head>
<style>
li {
list-style-type: none;
position: relative;
}
li:before {
content: "\2713";
position: absolute;
left: -50px;
}
</style>
</head>
<body>
<h3> Adding the <i> list icons using the :before pseudo selector </i> and changing its position </h3>
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
<li> Fourth </li>
<li> Fiveth </li>
</ul>
</body>
</html>
示例2
在下面的示例中，我們使用“img”元素向網頁添加了通知圖示。但是，我們將“img”元素放在“span”元素內。
此外，我們為span元素設定了“relative”位置。我們使用“:before”偽選擇器在通知圖示頂部添加了通知計數。我們為通知計數內容設定了“absolute”位置，並設定了left和top位置，使其看起來美觀。
<html>
<head>
<style>
span {position: relative;}
span:before {
content: "5 NEW";
position: absolute;
font-size: 15px;
font-weight: bold;
color: white;
background-color: red;
padding: 3px 8px;
border-radius: 8px;
top: -90px;
left: 10px;
}
</style>
</head>
<body>
<h3> Adding the <i> Notification count on the notification icon </i> and changing its position </h3>
<span> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRFgdEuNyjtHG97YATZHnBXUebNtbHXCDV0pPy8is&s" alt = "Notification"> </span>
</body>
</html>
示例3
在下面的示例中，我們演示瞭如何使用“:before”偽選擇器來建立一個工具提示。
在這裡，我們將半檔名作為“<a>”標籤的標籤，並將全檔名作為“title”屬性的值。在CSS中，我們使用了attr()函式來訪問我們用作內容的屬性值。
之後，我們為工具提示內容設定了absolute位置，並使用了transform CSS屬性來設定其在實際內容之上的位置。在輸出中，當用戶將滑鼠懸停在檔名上時，它會在工具提示中顯示全檔名。
<html>
<head>
<style>
a:hover:before {
content: attr(title);
position: absolute;
white-space: nowrap;
transform: translate(0%, -100%);
opacity: 0;
transition: all 0.3s ease-in-out;
background-color: aqua;
color: black;
padding: 5px;
border-radius: 5px;
}
a:hover:before {opacity: 1;}
</style>
</head>
<body>
<h3> Creating the tooltip by adding content before the HTML element </h3>
<a href = "#" title = "First_File_1.jpg"> First_Fi... </a> <br><br>
<a href = "#" title = "Second_File_2.jpg"> Second_F...</a> <br><br>
<a href = "#" title = "Third_File_3.jpg"> Third_Fil... </a>
</body>
</html>
示例4
在下面的示例中，我們演示瞭如何使用“:before”偽選擇器建立自定義複選框。
首先，我們將複選框的“display”設定為“none”以隱藏預設複選框。之後，我們在標籤之前添加了內容，並設定了尺寸和一些CSS樣式來設定複選框的樣式。接下來，我們添加了CSS以在選中複選框內顯示箭頭圖示。在這裡，我們使用了相對位置來設定複選框的位置。
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
border: 2px solid red;
border-radius: 6px;
margin-right: 12px;
position: relative;
top: 3px;
}
input[type="checkbox"]:checked+label:before {
content: "\2713";
font-size: 11px;
text-align: center;
color: white;
background-color: green;
}
</style>
</head>
<body>
<h3> Creating the custom checkbox using the :before pseudo selector </h3>
<input type = "checkbox" id = "car">
<label for = "car"> Car </label> <br> <br>
<input type = "checkbox" id = "Bike">
<label for = "Bike"> Bike </label>
</body>
</html>
使用者學習瞭如何將position CSS屬性與“:before”偽元素一起使用。在第一個示例中，我們為列表項添加了自定義圖示。在第二個示例中，我們學習瞭如何設定通知計數。第三個示例教我們如何使用“:before”偽選擇器和position屬性建立工具提示。在最後一個示例中，我們學習瞭如何建立自定義複選框。
614 次瀏覽
