::before pseudo element in html?

camnercamner Beginner grinnerPosts: 48Registered Users Big grins

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">

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?



  • camnercamner Beginner grinner Posts: 48Registered Users Big grins

    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.

Sign In or Register to comment.