CODEWITHSUNDEEP
htmlcsspseudo-element
Smithy
Smithy

Reputation: 847

How to put this dash pseudo element between li's

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>

Upvotes: 2

Views: 2125

Answers (4)

Bhavin Shah
Bhavin Shah

Reputation: 2482

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

Upvotes: 0

Yonas Hailu
Yonas Hailu

Reputation: 853

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

Upvotes: 0

Oriol
Oriol

Reputation: 288480

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.

Upvotes: 3

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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>

Upvotes: 0

Related Questions