Question

我正在为列表设计一些样式，并且无法正确放置我的伪元素。

我希望最终结果如下：

send_id *string*
The unique identifier of the send

所以我希望“内容”（最终会有多种类型）直接位于LI中的基本内容之后，而不是嵌套的UL之后。我现在已经在前后玩了一段时间并且无法正确使用它。

.properties li,
.properties ul {
  list-style: none;
  display: block;
}

.properties ul {
  padding: 0;
}

ul.properties {
  padding: 0 28px;
}

.properties .string::after {
  content: "string";
  float: left;
}

<ul class="properties">
  <li class="string">send_id
    <ul>
      <li>The unique identifier of the send</li>
    </ul>
  </li>
  <li class="string">email
    <ul>
      <li>The destination email address</li>
    </ul>
  </li>
  <li class="string">template
    <ul>
      <li>The name of the template used in the send</li>
    </ul>
  </li>
  <li class="string">status
    <ul>
      <li>The delivery status of the send – either <code>unknown</code>, <code>scheduled</code>, <code>softbounce</code>, <code>hardbounce</code>, or <code>delivered</code></li>
    </ul>
  </li>
  <li class="string">data_feed_url
    <ul>
      <li>Data feed used in the send</li>
    </ul>
  </li>
  <li class="date">send_time
    <ul>
      <li>The time the message was sent (only available after a send completed)</li>
    </ul>
  </li>
  <li>schedule_time
    <ul>
      <li>The time the message was scheduled (only if the message was scheduled in advance)</li>
    </ul>
  </li>
  <li>open_time
    <ul>
      <li>The time the message was opened with images turned on (only if it was actually opened)</li>
    </ul>
  </li>
  <li>click_time
    <ul>
      <li>The time the message was clicked (only if it was actually clicked)</li>
    </ul>
  </li>
</ul>

Answer 1

所以这是解决方案。

您无法为父元素创建伪并期望它对其子元素起作用。你需要做的是，你必须包装子元素并为其添加伪。

HTML：

<li class="string">
    <span>send_id</span> <!-- Wrap it -->
    <ul>
        <li>The unique identifier of the send</li>
    </ul>
</li>

CSS：

.properties .string > span::after {
  content: "string";
  position: relative;
  margin-left: 5px;
}

通过这种方式，您可以灵活地覆盖整个内容中的字符数。

演示：https://jsfiddle.net/h3jjc6bu/25/

快乐的编码！

Answer 2

所以你要做的就是将position设置为.string，将其设置为::after。要按照您的意愿放置它，您必须按照css中的更改进行操作。还要在文本周围放置一个跨度以防止与位置aboslute重叠;

在.string

上设置position: relative;

.properties .string span {
  position: relative;
}

然后将position: absolute;设置为伪::after，并将top: 0;和right: -50px;放在send_id旁边，如下所示：

.properties .string span::after {
  content: "string";
  position: absolute;
  top: 0;
  right: -50px;
}

了解position属性的工作原理：https://www.w3schools.com/cssref/pr_class_position.asp

下面你可以看到工作片段（我改变了伪文本的颜色，你可以看到它）。希望这有帮助

＆＃13;

.properties li,
.properties ul {
  list-style: none;
  display: block;
}

.properties ul {
  padding: 0;
}

ul.properties {
  padding: 0 28px;
}

.properties .string span {
  position: relative;
}

.properties .string span::after {
  content: "string";
  position: absolute;
  top: 0;
  right: -45px;
color: red;
}

＆＃13;

<ul class="properties">
  <li class="string"><span>send_id</span>
    <ul>
      <li>The unique identifier of the send</li>
    </ul>
  </li>
  <li class="string"><span>email</span>
    <ul>
      <li>The destination email address</li>
    </ul>
  </li>
  <li class="string"><span>template</span>
    <ul>
      <li>The name of the template used in the send</li>
    </ul>
  </li>
  <li class="string"><span>status</span>
    <ul>
      <li>The delivery status of the send – either <code>unknown</code>, <code>scheduled</code>, <code>softbounce</code>, <code>hardbounce</code>, or <code>delivered</code></li>
    </ul>
  </li>
  <li class="string"><span>data_feed_url</span>
    <ul>
      <li>Data feed used in the send</li>
    </ul>
  </li>
  <li class="date"><span>send_time</span>
    <ul>
      <li>The time the message was sent (only available after a send completed)</li>
    </ul>
  </li>
  <li><span>schedule_time</span>
    <ul>
      <li>The time the message was scheduled (only if the message was scheduled in advance)</li>
    </ul>
  </li>

＆＃13;

将嵌套列表中的伪元素放在LI中

2 个答案: