使用 before & content Vs 动态切换内容外观。 div & 显示 - 仅 CSS

Question

我正在尝试根据屏幕的宽度来切换显示在我网站上的一小部分内容。如果您访问 my site，您会注意到 "Coding is in my DNA" 区域旁边的三个“<”标记。如果您将浏览器 window 缩小到小于 800 像素，您应该会看到文本居中并且三个“<”消失。我知道有两种方法可以做到这一点，但目前我正在使用以下代码来实现这一点：

方法一-

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: "";
    }
}

但如果你这样做，它也有效...

方法二-

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;
    }
}

我选择了方法 A，因为它只是少了一些编码。但我想知道将方法 A 或方法 B 用于 show/hide 内容的优缺点是什么。

一些问题-

使用 CSS before 切换内容有什么坏处吗选择器？
相对于页面加载？
这些方法中的一种是否比另一种方法更可靠，或者一种方法对页面加载时间的影响会大于另一种方法（也许在这么小的范围内它不会有什么不同，但如果它是规模越大，方法就越重要）？
在隐藏内容方面，通常认为一种方法 "better practice" 优于另一种方法，还是完全是个人喜好？

我敢肯定还有一些我没有考虑到的事情，比如可读性、屏幕阅读器，也许还有一些浏览器兼容性问题，它如何影响 SEO（同样，SEO 可能只与更大的网站相关部分内容，但我仍然想知道以供将来参考）等

Answer 1

这是一个很棒的问题。

我不会说有严重的伤害。它确实 less supported 比经典的 display: none （< IE8 不支持，双冒号的语法在 IE8 上会中断）。
在您的情况下，在浏览器解析您的 CSS 并看到 content 规则之前，内容不会存在。使用方法 B 时，在解析 CSS 之前，内容是可见的。
肯定通过伪元素生成内容会影响加载时间。但是，它很可能并不重要，特别是在您的具体情况下。 Here's a fantastic benchmark 别人在另一个问题上完成的。
我会说这完全取决于您。您添加的内容仅仅是美观的，因此您不必担心不被搜索引擎解析；性能损失几乎不明显，浏览器兼容性在这两种方法的一般情况下都足够好。

使用 before & content Vs 动态切换内容外观。 div & 显示 - 仅 CSS

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

html

css

show-hide

dynamic-content

responsive-design