css - 停止文本围绕 css 生成的内容？

Question

我在列表中使用 CSS 生成的内容。当列表文本长到可以换行时，它会向左移动太远。我希望文本在换行时与自身保持内联。

<ul>
  <li>List item text</li>
  <li>List item with longer text</li>
</ul>
li {
  list-style: none;
  margin-bottom: 20px;
}
li:before {
  content: "+";
  color: red;
  margin-right: 10px;
}
ul {
  width: 120px;
}

http://codepen.io/anon/pen/uFchG

Answer 1

您可以稍微更改您的 CSS，使其成为 position:aboluste; 而 li(父级)是 position:relative;然后稍微向外移动。

CodePen Example

li {
  list-style: none;
  margin-bottom: 20px;
  position:relative;
}

li:before {
  content: "+";
  position:absolute;
  color: red;
  left:-15px;
}

ul {
  width: 120px;
}

或者，您可以给 li margin-left 和 :after left:-npx; 所以它仍然在 li 元素的边界内。