通常，我們使用 HTML 向網頁添加內容，并使用 CSS 設置內容樣式。 CSS 包含一些偽選擇器，例如“:before”，我們可以使用它在網頁中的任何 HTML 元素之前添加內容。
有時，開發人員不想使用“:before”選擇器將內容放在 HTML 元素之前，但他們需要定位內容。例如，如果我們使用‘:before’選擇器在文本之前添加圖標，則文本和圖標之間需要有空格。因此，我們需要使用 CSS 位置屬性更改圖標的位置。
在本教程中，我們將使用CSS位置屬性的“absolute”值來改變內容相對于其父元素位置的位置。
語法
用戶可以按照以下語法將position屬性與‘:before’偽選擇器一起使用。
div:before {
content: "arrow";
position: absolute;
}
登錄后復制
在上述語法中，我們在div元素之前添加了content值。此外，我們將content的位置設置為absolute，并且我們可以使用’left’、’right’、’top’和’bottom’ CSS屬性來改變其位置。
Example 1
的翻譯為：
示例 1
在下面的示例中，我們創建了項目列表。在CSS中，我們將列表樣式設置為none和相對位置。之后，我們使用“:before”偽選擇器在每個列表項之前添加正確的圖標。此外，我們設置絕對位置，并將“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”元素將通知圖標添加到網頁中。但是，我們在“span”元素內添加了“img”元素。
此外，我們為元素設置了’relative’定位。我們使用了’:before’偽選擇器在通知圖標的頂部添加了通知計數。我們為通知計數內容設置了’absolute’定位，并設置了左側和頂部位置，以使其看起來很好。
<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”偽選擇器來創建提示框。
在這里，我們添加了半個文件名作為“”標簽的標簽，并將完整文件名作為“title”屬性的值。在 CSS 中，我們使用 attr() 函數來訪問用作內容的屬性值。
之后，我們設置工具提示內容的絕對位置，并使用 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屬性創建工具提示。在最后一個示例中，我們學會了創建自定義復選框。
以上就是在CSS中使用position屬性的:before偽元素的各種技巧的詳細內容，更多請關注www.92cms.cn其它相關文章！
