发表新帖
发表新帖

Combining CSS Pseudo-elements, “:after” the “:last-child”

后端 未结
关注
8 1227
时光说笑
时光说笑 2020-12-22 20:18

I want to make \"grammatically correct\" lists using CSS. This is what I have so far:

The

  • tags are displayed horizontally with commas after t
    • 相关标签:
    8条回答
    • 走了就别回头了
      2020-12-22 20:51

      To have something like One, two and three you should add one more css style 

      li:nth-last-child(2):after {
    content: ' ';
}

      This would remove the comma from the second last element.

      Complete Code

      li {
  display: inline;
  list-style-type: none;
}

li:after {
  content: ", ";
}

li:nth-last-child(2):after {
  content: '';
}

li:last-child:before {
  content: " and ";
}

li:last-child:after {
  content: ".";
}
      <html>

<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>

</html>

      0 讨论(0)
    • 情书的邮戳
      2020-12-22 20:56

      You can combine pseudo-elements! Sorry guys, I figured this one out myself shortly after posting the question. Maybe it's less commonly used because of compatibility issues.

      li:last-child:before { content: "and "; }

      li:last-child:after { content: "."; }

      This works swimmingly. CSS is kind of amazing.

      0 讨论(0)
    • 北荒
      2020-12-22 20:57

      This works :) (I hope multi-browser, Firefox likes it)

      li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
      <html>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

      0 讨论(0)
    • 隐瞒了意图╮
      2020-12-22 20:59

      I do like this for list items in <menu> elements. Consider the following markup:

      <menu>
  <li><a href="/member/profile">Profile</a></li>
  <li><a href="/member/options">Options</a></li>
  <li><a href="/member/logout">Logout</a></li>
</menu>

      I style it with the following CSS:

      menu > li {
  display: inline;
}

menu > li::after {
  content: ' | ';
}

menu > li:last-child::after {
  content: '';
}

      This will display:

      Profile | Options | Logout

      And this is possible because of what Martin Atkins explained on his comment

      Note that in CSS 2 you would use :after, not ::after. If you use CSS 3, use ::after (two semi-columns) because ::after is a pseudo-element (a single semi-column is for pseudo-classes).

      0 讨论(0)
    • -上瘾入骨i
      2020-12-22 21:01

      I am using the same technique in a media query which effectively turns a bullet list into an inline list on smaller devices as they save space.

      So the change from:

      • List item 1
      • List item 2
      • List item 3

      to:

      List Item 1; List Item 2; List Item 3.

      0 讨论(0)
    • 醉酒成梦
      2020-12-22 21:08

      Adding another answer to this question because I needed precisely what @derek was asking for and I'd already gotten a bit further before seeing the answers here. Specifically, I needed CSS that could also account for the case with exactly two list items, where the comma is NOT desired. As an example, some authorship bylines I wanted to produce would look like the following:

      One author: By Adam Smith.

      Two authors: By Adam Smith and Jane Doe.

      Three authors: By Adam Smith, Jane Doe, and Frank Underwood.

      The solutions already given here work for one author and for 3 or more authors, but neglect to account for the two author case—where the "Oxford Comma" style (also known as "Harvard Comma" style in some parts) doesn't apply - ie, there should be no comma before the conjunction.

      After an afternoon of tinkering, I had come up with the following:

      <html>
 <head>
  <style type="text/css">
    .byline-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .byline-list > li {
      display: inline;
      padding: 0;
      margin: 0;
    }
    .byline-list > li::before {
      content: ", ";
    }
    .byline-list > li:last-child::before {
      content: ", and ";
    }
    .byline-list > li:first-child + li:last-child::before {
      content: " and ";
    }
    .byline-list > li:first-child::before {
      content: "By ";
    }
    .byline-list > li:last-child::after {
      content: ".";
    }
  </style>
 </head>
 <body>
  <ul class="byline-list">
   <li>Adam Smith</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
  </ul>
 </body>
</html>

      It displays the bylines as I've got them above.

      In the end, I also had to get rid of any whitespace between li elements, in order to get around an annoyance: the inline-block property would otherwise leave a space before each comma. There's probably an alternative decent hack for it but that isn't the subject of this question so I'll leave that for someone else to answer.

      Fiddle here: http://jsfiddle.net/5REP2/

      0 讨论(0)
     看不清?
    提交回复
    热议问题