Dynamically toggle content appearance with before & content Vs. div & display - CSS only

Question

I'm trying to toggle a small chunk of content being displayed on my site depending on how wide the screen is. If you visit my site you'll notice the three "<" marks next to the area that says "Coding is in my DNA". If you shrink your browser window down to less than 800px you should see the text become centered and the three "<" disappear. There are two ways that I know how to do this but currently I'm using the following code to achieve this:

Method A -

HTML:

<div id="home-title" class="col-xs-12 col-sm-6 col-md-5">
    Thanks for visiting

    <h2>DigitalBrent.com</h2>

    <div id="sub-head">Coding is in my DNA</div>
</div>

CSS:

#sub-head::before{
    content: "<<<";
}

@media(max-width: 800px){    
    #sub-head::before{
        content: "";
    }
}

But it also works if you do it like this...

Method B -

HTML:

<div id="home-title" class="col-xs-12 col-sm-6 col-md-5">
    Thanks for visiting

    <h2>DigitalBrent.com</h2>

    <div id="sub-head"><div id="arrows">&lt;&lt;&lt;&nbsp;</div><div id="dont-hide">Coding is in my DNA</div></div>
</div>

CSS:

#arrows, #dont-hide{
  display: inline-block;
}

@media(max-width: 800px){    
    #arrows{
        display: none;
    }
}

I went for method A because it's just a little less coding. But I am wondering what the benefits and disadvantages might be for using method A or method B to show/hide content.

Some questions -

1. Is there any harm in toggling the content using the CSS before selector?

2. When does the before content get rendered in relation to page load?

3. Is one of these methods more reliable on the other or will one method effect page load times more than the other (maybe on this small scale it won't make a difference but if it were on a larger scale would the methodology matter)?

4. Is one method generally considered "better practice" than the other for hiding content or is it entirely personal preference?

I'm sure there must also be things I haven't accounted for such as readability, screen readers, maybe some browser compatibility issues, how does it effect SEO (Again, SEO is probably only relevant to a much larger section of content but I'd still like to know for future reference), etc.

Answer 1

This is a fantastic question.

1. I wouldn't say there's a serious harm. It is indeed less supported than going with the classic display: none (not supported on < IE8 and your syntax of double colon would break on IE8).
2. In your case, until the browser parses your CSS and sees that content rule, the content won't be there. While using Method B, before parsing the CSS, the content is instead visible.
3. Definitely generating content through pseudo-elements will affect loading times. However, it will most likely not be significative, specially on your specific case. Here's a fantastic benchmark done by someone on another question.
4. I would say that is entirely up to you. The content you're adding is merely aesthetical so you shouldn't care about not being parsed by search engines; the performance hit is barely noticeable and browser compatibility is good enough on general scenarios for both methods.