Question

我使用li:after在li之后添加内容，但无效。

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#banner {
  height: 30px;
  width: 750px;
  margin: 0 auto;
  background-color: aquamarine;
}

#banner ul {
  list-style: none;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
}

#banner ul li {
  float: left;
  margin: auto 0;
  height: 30px;
  line-height: 30px;
  width: 100px;
  text-align: center;
}

#banner ul li :after {
  content: "a";
  top: 1px;
  bottom: 1px;
  right: 0;
  width: 5px;
  background-color: black;
}

＆＃13;

<!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="banner">
    <ul>
      <li>Home</li>
      <li>link</li>
      <li>product</li>
      <li>phone</li>
      <li>cat</li>
      <li>about</li>
    </ul>
  </div>

</body>

</html>

＆＃13;

为什么内容不显示？

Answer 1

因为您拥有此top: 1px; bottom: 1px; right: 0;，所以您需要使用position并且a和::after之间有空格

使用该空格，它会将::after应用于li的所有子项。所以它与

相同

#banner ul li *::after

查看代码段

body {
  margin: 0;
  padding: 0;
}

#banner {
  height: 30px;
  max-width: 750px;
  margin: 0 auto;
  background-color: aquamarine;
}

#banner ul {
  list-style: none;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
}

#banner ul li {
  float: left;
  margin: auto 0;
  height: 30px;
  line-height: 30px;
  width: 100px;
  text-align: center;
  position:relative;
}

#banner ul li::after {
  content: "a";
  position:absolute;
  top: 1px;
  bottom: 1px;
  right: 5px;
  width: 5px;
  background-color: red;
}

<div id="banner">
  <ul>
    <li>Home</li>
    <li>link</li>
    <li>product</li>
    <li>phone</li>
    <li>cat</li>
    <li>about</li>
  </ul>
</div>

Answer 2

元素（li）和:after之间不应有空格。

应该是：

#banner ul li:after

和不

#banner ul li :after

Answer 3

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#banner {
  height: 30px;
  width: 750px;
  margin: 0 auto;
  background-color: aquamarine;
}

#banner ul {
  list-style: none;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
}

#banner ul li {
  float: left;
  margin: auto 0;
  height: 30px;
  line-height: 30px;
  width: 100px;
  text-align: center;
}

#banner ul li:after {
  content: "a";
  top: 1px;
  bottom: 1px;
  right: 0;
  width: 5px;
  background-color: black;
}

＆＃13;

<!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="banner">
    <ul>
      <li>Home</li>
      <li>link</li>
      <li>product</li>
      <li>phone</li>
      <li>cat</li>
      <li>about</li>
    </ul>
  </div>

</body>

</html>

＆＃13;

李：以后不工作

3 个答案: