如何向div的边框添加标签并使其具有响应性？

要向div的边框添加标签并使其具有响应性，可以使用伪元素和CSS样式来实现。

首先，使用CSS选择器选中要添加标签的div元素，例如：

div {
  position: relative;
}

div::before {
  content: "标签内容";
  position: absolute;
  top: -10px;
  left: -10px;
  padding: 5px;
  background-color: #f00;
  color: #fff;
  font-size: 12px;
}

上述代码中，我们使用了伪元素::before来创建一个虚拟的元素，并设置其内容为"标签内容"。通过position: absolute将其定位在div的左上角，然后使用top和left属性微调位置。padding属性用于设置标签的内边距，background-color和color属性用于设置标签的背景色和文字颜色，font-size属性用于设置标签文字的大小。

这样就可以在div的边框上添加一个标签，并且可以根据需要调整标签的样式。

至于响应性，可以使用CSS媒体查询来根据不同的屏幕尺寸设置不同的样式。例如，可以在媒体查询中修改标签的位置、大小、颜色等属性，以适应不同的设备。

以下是一个示例代码，演示了如何在div的边框上添加标签并使其具有响应性：

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      position: relative;
      width: 300px;
      height: 200px;
      border: 1px solid #000;
    }

    div::before {
      content: "标签内容";
      position: absolute;
      top: -10px;
      left: -10px;
      padding: 5px;
      background-color: #f00;
      color: #fff;
      font-size: 12px;
    }

    @media screen and (max-width: 600px) {
      div::before {
        top: -20px;
        left: -20px;
        padding: 10px;
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在上述示例中，div元素的初始大小为300px * 200px，并带有1px的黑色边框。通过CSS样式添加了一个红色背景、白色文字的标签，并设置了初始的位置和样式。在媒体查询中，当屏幕宽度小于等于600px时，修改了标签的位置、内边距和文字大小。

这样，无论是在大屏幕还是小屏幕设备上，都可以向div的边框添加标签并使其具有响应性。