极客笔记CSS 使用position属性的:before伪元素的各种技巧
通常，我们使用HTML添加内容到网页，并使用CSS对内容进行样式化。CSS中包含一些伪选择器，比如’:before’，我们可以使用它在任意HTML元素之前添加内容到网页。
有时候，开发者不想使用’:before’选择器将内容放在HTML元素之前，而是需要对内容进行定位。例如，如果我们使用’:before’选择器在文本之前添加一个图标，我们需要在文本和图标之间留有空间。因此，我们需要使用CSS的position属性来改变图标的位置。
在本教程中，我们将使用CSS的position属性的’absolute’值来相对于其父元素的位置改变内容的位置。
语法
用户可以按照以下语法使用position属性和’:before’伪选择器。
div:before {
content: "arrow";
position: absolute;
}
在上面的语法中，我们在div元素之前添加了content值。同时，我们为content设置了position属性为absolute，通过left、right、top和bottom属性可以改变其位置。
示例1
在下面的示例中，我们创建了一个项目列表。在CSS中，我们将list-style设置为none并设置了position属性为relative。然后，我们使用:before伪选择器在每个列表项之前添加了右侧图标。同时，我们将position属性设置为absolute，并将left属性的值设为-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’ 位置，并以一种使其看起来漂亮的方式设置了左和上位置。
<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()函数访问属性值，将其作为内容使用。
之后，我们对工具提示内容设置了绝对位置，并使用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>
用户学会使用带有‘:before’伪元素的position CSS属性。在第一个示例中，我们添加了自定义图标来代表列表项。在第二个示例中，我们学会了设置通知计数。第三个示例教会我们如何使用‘:before’伪选择器和position属性来创建一个工具提示。在最后一个示例中，我们学会了创建一个自定义复选框。