数据结构
网络
关系数据库管理系统 (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 次浏览
