CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 209

Place Pseudo Element Before Nested List inside LI

I'm working on some styling for a list and having trouble getting my Pseudo Element placed properly.

What I want the end result to look like is as follows:

send_id *string*
The unique identifier of the send

So I want the "content" (there will eventually be multiple types) to come right after the base content in the LI and not after the nested UL as well. I've been playing around with both before and after for a while now and can't get it right.

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

Upvotes: 2

Views: 790

Answers (2)

webta.st.ic
webta.st.ic

Reputation: 5179

So what you have to do is to set the right position to .string and it's pseudo ::after. To place it like you want, you must do follow changes in your css. Also put a span around the text to prevent the overlapping with position aboslute;

Set position: relative; on .string

.properties .string span {
  position: relative;
}

Than set position: absolute; to you pseudo ::after and place it with top: 0; and right: -50px; next to the send_id like this:

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

Read how the position property works: https://www.w3schools.com/cssref/pr_class_position.asp

Below you can see the working snippet (I changed the color of the pseudo text so you can see it). Hope this helps

.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;
}
<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>

Upvotes: 0

CodeMonk
CodeMonk

Reputation: 920

So here is the solution.

You can't create a pseudo to the parent element and expect it to work on its child element. What you need to do is, you must wrap the child element and add pseudo to it.

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

This way you can have a flexibility over the number of characters throughout the content.

Demo: https://jsfiddle.net/h3jjc6bu/25/

Happy coding!

Upvotes: 2

Related Questions