CSS 中使用position属性的:before伪元素的各种技巧

cssweb developmentfront end technology更新于 2024/5/21 6:04:17

通常，我们使用HTML向网页添加内容，并使用CSS设置内容的样式。CSS包含一些伪选择器，例如":before"，我们可以使用它在任何HTML元素之前向网页添加内容。

有时，开发人员不想使用":before"选择器将内容放在HTML元素之前，但他们需要定位内容。例如，如果我们使用":before"选择器在文本前添加图标，则需要在文本和图标之间留出空间。因此，我们需要使用 CSS 的position属性来更改图标的位置。

在本教程中，我们将使用 CSS 的position属性的"absolute"值来更改内容相对于其父元素的位置。

语法

用户可以按照以下语法将position属性与":before"伪选择器结合使用。

div:before {
    content: "arrow";
    position: absolute;
}

在上述语法中，我们在div元素之前添加了内容值。此外，我们将内容的position设置为absolute，并且可以使用CSS属性的"left"、"right"、"top"和"bottom"来更改其位置。

示例 1

在下面的示例中，我们创建了项目列表。在 CSS 中，我们将列表样式设置为"none"，并将位置设置为"relative"。之后，我们使用":before"伪选择器在每个列表项之前添加右侧图标。此外，我们将位置设置为"absolute"，并将 CSS 属性"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>

用户学习了如何将 CSS 的position属性与":before"伪元素结合使用。在第一个示例中，我们为列表项添加了自定义图标。在第二个示例中，我们学习了如何设置通知数量。第三个示例教我们如何使用":before"伪选择器和position属性创建工具提示。在最后一个示例中，我们学习了如何创建自定义复选框。