How to put this dash pseudo element between li's

Question

I would like this red dash to be equally positioned between 1st and 2nd(and 2nd and 3rd) "li" in this list, but it appears above it and not on the left side. Is it possible to do it this way? Here's the example:

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

This is what I am trying to accomplish: http://sketchtoy.com/67757539

.main__headers--info ul li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}

.main__headers--info ul li:nth-child(2),
.main__headers--info ul li:nth-child(3) {
  margin-left: 50px;
}

.main__headers--info ul li:nth-child(2)::before {
  content: "";
  display: block;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

Red dash should appear before the second "li" and before the third "li", but not before the first one — Smithy, Dec 24 '16 at 13:09
Then just modify `.main__headers--info ul li:nth-child(2)::before {` to `.main__headers--info ul li:nth-child(2)::before,.main__headers--info ul li:nth-child(3)::before {`? — junkfoodjunkie, Dec 24 '16 at 13:11
or do `.main__headers--info ul li:not(:first-of-type)::before {` — junkfoodjunkie, Dec 24 '16 at 13:15
This is what I am trying to accomplish: http://sketchtoy.com/67757539 — Smithy, Dec 24 '16 at 13:18

score 3 · Accepted Answer · edited May 23 '17 at 11:46

3

I would remove the margins and just add inline-block pseudo-elements:

.main__headers--info > ul > li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}
.main__headers--info > ul > li:not(:first-child)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

See How to remove the space between inline-block elements? if the space before the pseudo-elements annoys you.

edited May 23 '17 at 11:46

Community

1
1

answered Dec 24 '16 at 13:26

Oriol

274,082
63
437
513

Thank you, I have added margins here =>.main__headers--info ul li:not(:first-child)::before { margin: 0px 20px; } , works perfectly – Smithy Dec 24 '16 at 13:37

Yonas Hailu · Answer 2 · 2016-12-24T13:34:57.360

0

I have modified the pen.

here is the demo If i got your question correctly.

add this css code to the 2nd and 3rd li's :before element

  position: absolute;
  left: 0;
  width: 100%;

and position: relative to li element Codepen

edited Dec 24 '16 at 13:34

answered Dec 24 '16 at 13:11

Yonas Hailu

853
7
20

this is what I am trying to accomplish, edited question: http://sketchtoy.com/67757539 – Smithy Dec 24 '16 at 13:17
1

@Smithy I have modified the pen. – Yonas Hailu Dec 24 '16 at 13:35

score 0 · Answer 3 · answered Dec 24 '16 at 13:17

0

Here, working example, will put the red line on any li-element not the first.

.main__headers--info ul li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}

.main__headers--info ul li:nth-child(2),
.main__headers--info ul li:nth-child(3) {
  margin-left: 50px;
}

.main__headers--info ul li:not(:first-of-type)::before {
  content: "";
  display: block;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

answered Dec 24 '16 at 13:17

junkfoodjunkie

3,168
1
19
33

can you check this sketch example, red dash should be between and not above the li's http://sketchtoy.com/67757539 – Smithy Dec 24 '16 at 13:20
Then you cannot use borders. – junkfoodjunkie Dec 24 '16 at 13:25

score 0 · Answer 4 · edited Dec 25 '16 at 09:32

.wrapper {
  display: flex;
  margin: 0 auto;
  padding: 0 30px;
  width: 100%; }

.seperator {
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0 1px;
  margin-top: 0 !important; }
  .seperator hr {
    height: 2px;
    background: gray;
    border: none;
    vertical-align: middle; }

<div class="wrapper">
    <div class="">
       Text
    </div>

    <div class="seperator"><hr></div>

    <div class="">
        Text
    </div>

    <div class="seperator"><hr></div>

    <div class="">
        Text
    </div>
</div>

How to put this dash pseudo element between li's

4 Answers4