CSS input元素之前或之后生成内容

在本文中，我们将介绍如何使用CSS在input元素之前或之后生成内容。我们将探讨content属性的使用以及伪元素before和after的应用。

阅读更多：CSS 教程

content属性

CSS的content属性用于在元素之前或之后生成内容。它是伪元素before和after的必需属性。content属性定义了要在元素之前或之后生成的内容，可以是文本、图像或计数器。

我们首先来看一个简单的例子，使用content属性在input元素之前生成一个文本：

input::before {
  content: "请输入：";
}

上述代码在所有的input元素之前添加了一个文本“请输入：”。通过调整content属性的值，我们可以在input元素之前生成任何我们想要的内容。

伪元素before和after

伪元素before和after是CSS中两个强大的选择器。它们用于在元素的内容之前或之后插入生成的内容，而不会改变DOM结构。

接下来，我们将使用before和after伪元素来为input元素设计一些样式。

首先，我们为input元素设置一个容器，然后使用before伪元素在输入框之前生成一个图标。

.input-container input {
  padding-left: 20px;
}

.input-container input::before {
  content: url(icon.png);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

上述代码中，我们定义了一个class为input-container的容器，让input元素通过padding-left腾出位置给图标使用。然后，使用before伪元素插入了一个图标（这里使用了一个名为icon.png的图像），并使用绝对定位将图标置于输入框的左边，并通过transform属性垂直居中。

接下来，我们使用after伪元素在输入框之后生成一个提示文本，当我们鼠标悬停在输入框上方时，会显示该提示文本。

.input-container input::after {
  content: "请输入内容";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.input-container input:hover::after {
  opacity: 1;
}

上述代码中，我们使用after伪元素插入了一个文本“请输入内容”，并设置了绝对定位，将其置于输入框之后。我们还通过opacity属性将其初始透明度设置为0，并在鼠标悬停时过渡到完全可见。