li :after 不工作

Question

我使用 li:after 在 li 之后添加内容，但不起作用。

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;
}

<!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>

为什么内容不显示？

Answer 1

元素 (li) 和 :after 之间不应有 space。

应该是：

#banner ul li:after

和不是

#banner ul li :after

Answer 2

因为你有这个 top: 1px; bottom: 1px; right: 0; 你需要使用 position 并且 a 和 ::after

之间有一个 space

与 space 一起，它会将 ::after 应用于 li 的所有 children。所以它与

相同

#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 3

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;
}

<!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>

li :after 不工作

The li :after do not work

html

css

pseudo-element