::before pseudo element in html?

camner · October 18, 2017

I'm pretty sure I know how pseudo elements work in CSS. For example,

.classname::before {
  content: "This will appear before the element"
  }

will display the given text before the element with class "classname"...

BUT, in the Lightbox html code, I saw the following:

<div class="sm-lightbox-info-expand">
   <span class="sm-fonticon">
    ::before
   </span>
</div>

This is putting the pseudo element "::before" right in the HTML! What exactly does that do? What is the effect of putting a pseudo element directly in the HTML vs in the CSS?

camner · October 19, 2017

Further research led me to an answer...

I was looking at the page code in the Firefox Developer Tools Inspector. Apparently the Inspector displays the "::before" and "::after" pseudo elements as an aid to looking at the HTML/CSS. In the "View Source" view one can see that the HTML doesn't actually contain these pseudo elements.

::before pseudo element in html?

Comments