Title: Add a " | " between two CSS elements.
Last modified: August 22, 2016

---

# Add a " | " between two CSS elements.

 *  [legarreta](https://wordpress.org/support/users/legarreta/)
 * (@legarreta)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/add-a-between-two-css-elements/)
 * Hi everyone,
 * So I’ve changed up my metadata under the header a little bit, and run into an
   issue — I want to insert a | between the author and date elements, but I’m not
   sure how through html and/or CSS. Here’s how it looks currently:
 * [http://i.imgur.com/aE7sGVT.png](http://i.imgur.com/aE7sGVT.png)
 * I want to change it so that there’s a divider between the author name and the
   date. Any help would be greatly appreciated. Here’s how both the html and CSS
   look for the two elements:
 * <`div id=”author”><i><?php $author_display_name = get_the_author_meta( ‘display_name’);
   
   $bk_author_id = $post->post_author; printf(‘<div class=”author” itemprop=”author”
   >%s</div>’, ‘<a rel=”author” href=”‘.get_author_posts_url( get_the_author_meta(‘
   ID’ ) ).'” title=”‘.sprintf(__(‘Posts by %s’,’bkninja’), $author_display_name).'”
   >’.$author_display_name.'</a>’) ?></i></div> <div id=”date”><p><?php echo get_the_date();?
   ></p></div>`
 *     ```
       #author {
           display: table-caption;
           float: left;
           padding-top: 35px;
           font-style: italic;
   
       }
       #date {
           display: table-caption;
           margin-left : 20px;float:left;
           padding-top: 35px;
       ```
   
 * Thanks for the help in advanced, everyone!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [MarkRH](https://wordpress.org/support/users/markrh/)
 * (@markrh)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/add-a-between-two-css-elements/#post-5793174)
 * Just add a ” | ” in the code:
 *     ```
       <div id="author"><i><?php $author_display_name = get_the_author_meta( 'display_name' );
       $bk_author_id = $post->post_author;
       printf('<div class="author" itemprop="author" >%s</div>', '<a rel="author" href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ).'" title="'.sprintf(__('Posts by %s','bkninja'), $author_display_name).'">'.$author_display_name.'</a>') ?></i></div>
       <div id="date"><p><?php echo ' | '.get_the_date(); ?></p></div>
       ```
   
 * I added it just before **get_the_date()**.
 * That should work.
 *  Thread Starter [legarreta](https://wordpress.org/support/users/legarreta/)
 * (@legarreta)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/add-a-between-two-css-elements/#post-5793320)
 * Thanks very much, that did the trick!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Add a " | " between two CSS elements.’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [divider](https://wordpress.org/support/topic-tag/divider/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [metadata](https://wordpress.org/support/topic-tag/metadata/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [legarreta](https://wordpress.org/support/users/legarreta/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/add-a-between-two-css-elements/#post-5793320)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics