Question

我使用:after在div之后添加内容，但是你知道它会添加到div的文本中，但不会添加到div的边框旁边。

#div2 {

    width: 300px;
    height: 100px;
    background-color: beige;
}

#div2:after {

    content: "a";
    top: 5px;
    bottom: 5px;
    right: 5px;
    width: 1px;
    background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="styles/index.css" type="text/css">
</head>
<body>

<div id="div2">
    div2-text
</div>

</body>
</html>

我可以在div的框架后轻松添加边框（你可以看到div的背景颜色）吗？

Answer 1

这是你的意思吗？

#div2 {
  position: relative;
  width: 300px;
  height: 100px;
  background-color: beige;
}

#div2:after {
  position: absolute;
  content: "";
  top: 5px;
  right: -5px;
  width: 1px;
  height: 90px;
  background-color: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <link rel="stylesheet" href="styles/index.css" type="text/css">
</head>

<body>

  <div id="div2">
    div2-text
  </div>

</body>

</html>

Answer 2

建议在你的div之后创建另一个空div，你有内容，绝对位置的解决方案不好/有用，因为你的网站上会有更多的东西，然后它们会在你的＃上34;＆＃34;文本或您将添加的任何文本：之后。所以只需创建另一个div： - ）

Answer 3

将文字放在span中并将:after应用于span

＆＃13;

#div2 {
  width: 300px;
  height: 100px;
  background-color: beige;
}

#div2 span:after {
  content: "after";
}

＆＃13;

<div id="div2">
  <span>div2-text</span>
</div>

＆＃13;

如何轻松地在元素之后添加信息而不是其内容？

3 个答案: