Have CSS render out HTML?

Question

I have been trying to figure out a way to have my post date in my blog show up in this styled hr tag

Right now there can be a symbol or static text in the line

content: " symbol here ";

How could I have my code render inside of this box so it displays my blogs post date?

I need to insert this expression.

 Post date: {entry_date format="%Y %m %d"}

Is this possible ?

Are you against the use of JS? – JoDev Oct 24 '13 at 14:45 — JoDev, Oct 24 '13 at 14:45
No just looking for any type of solutions. Thanks! – Miura-shi Oct 24 '13 at 15:02 — Miura-shi, Oct 24 '13 at 15:02

score 6 · Accepted Answer · edited May 23 '17 at 10:31

Using :after pseudo class

You can use a special attr like this : see this topic

hr.style-eight:after {
    content: attr(data-date) ;
}

And in HTML

<hr class="style-eight" data-date="24-10-2013">

Thanks to this system, you are able to manipulate the content like you want... With some JS maybe, or with PHP using echo date("Y m d") (don't forget to set the timezone, something like date_default_timezone_set('America/New_York');) function.

And with jQuery : see here for date

$(document).ready(function() {
   var today = new Date();
   var dd = today.getDate();
   var mm = today.getMonth()+1; //January is 0!

   var yyyy = today.getFullYear();
   if(dd<10){dd='0'+dd;}
   if(mm<10){mm='0'+mm;}
   today = yyyy+' '+mm+' '+dd;//like you want ^^ (%Y %m %d)

    $('hr.style-eight').attr('data-date', today);
});

Using PURE HTML and no pseudo class :after

Another way without the use of :after pseudo class : Online example

hr.style-eight+span { 
  display: inline-block; 
  position: relative; 
  top: -0.7em; 
  font-size: 1.5em; 
  padding: 0 0.25em; 
  background: white;
}

And in the HTML

<hr class="style-eight" />
<span>2013 10 24</span>

Have CSS render out HTML?

1 Answers1