通常，我们使用 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伪元素的各种技巧的详细内容。