Question

如何将+号向左移动？

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

Answer 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 { 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%; }

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

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

Answer 3

添加以下CSS：

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

将在左侧带+图标。

如何将+号向左移动？

3 个答案: