li :after 不工作[重复]答案

【问题标题】：The li :after do not work [duplicate]li :after 不工作[重复]
【发布时间】：2017-05-04 12:10:29
【问题描述】：

我使用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>

为什么内容不显示？

【问题讨论】：

去掉冒号前的空格 - #banner ul li:after
一个简单的谷歌会帮助你，它会比在这里发布问题要快得多。搜索和研究然后问developer.mozilla.org/en-US/docs/Web/CSS/::after
请在发布问题之前做一些研究.. :/

标签： html css pseudo-element

【解决方案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>

【讨论】：

为什么要定位？也许他不希望它在 li 的最右边，而是在文本之后
因为 op 有这个top: 1px; bottom: 1px; right: 0;

【解决方案2】：

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

应该是：

#banner ul li:after

而不是

#banner ul li :after

【讨论】：

【解决方案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>

【讨论】：

在编写css代码时，伪代码和html元素之间不允许有空格