如何将 + 号移到左侧？答案

【问题标题】：How do I move the + sign to the left?如何将 + 号移到左侧？
【发布时间】：2019-12-01 08:08:26
【问题描述】：

如何将 + 号移到左侧？

* {
  margin: 0;
  padding: 0;
}

.content {
  justify-content: center;
  align-items: center;
  height: 100vh;
}

details {
  font-family: 'Raleway', sans-serif;
}

summary {
  transition: background .75s ease;
  width: 960px;
  outline: 0;
  text-lign: center;
  font-size: 85%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid black;
}

h50 {
  color: rgb(0, 0, 255);
  text-align: left;
  margin-bottom: 0;
  padding: 15px;
  text-shadow: none;
  font-size: small;
  font-weight: bold;
}

details p {
  padding: 0 25px 15px 25px;
  margin: 0;
  text-shadow: none;
  text-align: justify;
  line-height: 1.3em;
}

summary::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
  display: inline-block;
  padding-right: 15px;
  font-size: 90%;
  color: rgb(0, 0, 255);
}

details[open] summary::after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
  display: inline-block;
  padding-right: 15px;
  font-size: 90%;
}

details[open] summary:hover {
  background: none;
}

summary:hover {
  background: #d3d3d3;
}

details summary::-webkit-details-marker {
  display: none;
}

【问题讨论】：

你能添加你的html吗？也许使用 sn-p 工具？
不要转储所有的 css，只添加需要的，同时添加你的 html 代码。
我什至看不出你有什么问题，你想把+号移到什么的左边？如果它只是在其当前位置的稍微左侧，只需在summary::after中调整您的padding-right

标签： javascript html css

【解决方案1】：

summary {
    transition: background .75s ease;
    width: 960px;
    outline: 0;
    text-align: center;
    font-size: 85%;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid black;
}

summary::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    margin-left: 5px;
    display: inline-block;
    padding-right: 15px;
    font-size: 90%;
    color: rgb(0, 0, 255);
}
details[open] summary::before {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
    display: inline-block;
    padding-right: 15px;
    font-size: 90%;
}

在上面的共享代码中，您必须从summary CSS 中删除float: right 并删除justify-content: space-between，它也适用于使用before 而不是after，因为使用了after在文本之后插入元素，与before 一样，它将在摘要标记中包含文本之前的元素。

【讨论】：

【解决方案2】：

我不得不不同意接受的答案，在左边使用 ::after 来表示你想要的东西对于阅读你的代码的人来说真的很混乱，你必须像这样使用 ::before：

* {
  margin: 0;
  padding: 0;
}

.content {
  justify-content: center;
  align-items: center;
  height: 100vh;
}

summary {
  transition: background .75s ease;
  width: 960px;
  outline: 0;
  text-lign: center;
  font-size: 85%;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid black;
}

h50 {
  color: rgb(0, 0, 255);
  text-align: left;
  margin-bottom: 0;
  padding: 15px;
  text-shadow: none;
  font-size: small;
  font-weight: bold;
}

summary::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
  display: inline-block;
  padding-right: 15px;
  font-size: 90%;
  color: rgb(0, 0, 255);
}


summary:hover {
  background: #d3d3d3;
}

<summary>
  <h50> Hey </h50>
 </summary>

【讨论】：

【解决方案3】：

添加以下css：

 h50{
     padding-left: 35px !important;
    }
summary::after{
    position: absolute;
}

将在左侧显示 + 图标。

【讨论】：

你认为关键是要把文本左边的“+”？但在这种情况下使用::before
你可以用summary::before更新你写的css summary::after。并添加位置：绝对；给它。也适合你。