Is it possible to insert an HTML tag from pseudo-element content using CSS?

Question

I am trying to use the pseudo-element ::before to insert an <hr> before each <article> tag, so far I have:

  article::before {
    content: "\003C br \\ \003E";
  }

but this doesn't work. Is there some other way of inserting HTML tags into pseudo-element CSS?

Please don't cross-post questions. – BoltClock Feb 13 '15 at 15:51 — BoltClock, Feb 13 '15 at 15:51

score 5 · Accepted Answer · answered Feb 13 '15 at 15:08

As said by @rounin you can't insert html in the generated content.

But hr is just an element with its custom CSS styling.

You can recreate the styling for your generated content

article::before {
  content: "";
  border: 1px inset;
  box-sizing: border-box;
  color: gray;
  display: block;
  height: 2px;
  margin: 0.5em auto;
}

<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nihil odit impedit ipsam et ducimus.</article>
<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti!
</article>

Perfect that replicates the
tag exactly, thanks. – NickC Feb 14 '15 at 13:10 — NickC, Feb 14 '15 at 13:10

score 4 · Answer 2 · edited Mar 14 '21 at 10:57

You can't insert HTML markup into the content: attribute of the ::before pseudo-element - the CSS spec won't allow it.

However, you can simulate an <hr> before the contents of your article (if that's what you need) simply by declaring margin-top: followed by border-top: followed by padding-top:

article {
  margin-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  padding-top: 12px;
}

<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nihil odit impedit ipsam et ducimus.</article>
<article>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti!
</article>

Is it possible to insert an HTML tag from pseudo-element content using CSS?

2 Answers2