Marco Bernardini Marco Bernardini - 1 year ago 88
CSS Question

changing display order of span

I'm helping a friend writing some articles for scientific magazines. Some publishers require the authors cited in the bibliography in the form "last name, first name", while others asked for "first name, last name" (of course with a list ordered by last name, and sometimes with the last name in small caps).

I know this would be better done with a database, but my friend's skills are not at that level.

If I write a very simple HTML page, using lines like this one

<p><span class="lname">Doe</span>, <span class="fname">John</span></p>

is there a CSS way to have the line shown as "John DOE" or must I use some JS?

Answer Source

You can do this with flexbox, using order (with a little adjustment).

The Code (

p {
.fname {
.lname {
.fname:after {
  <span class="lname">Doe</span>
  <span class="fname">John</span>

You can use a more dynamic solution like this too:

#name {
  display: flex;
#name.fl .firstname:after {
  content: "\00a0";
#name.lf .lastname:after {
  content: ",\00a0";
#name.fl .firstname,
#name.lf .lastname {
  order: 1;
#name.fl .lastname,
#name.lf .firstname {
  order: 2;
<p class="fl" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>
<p class="lf" id="name">
  <span class="firstname">John</span><span class="lastname">Doe</span>

Hint: You can use this solution but it would be better to prepare the name with PHP or get the name in the right format from database. Setting the order is only setting the visual ordering but not the ordering on code or for screenreaders.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download