Question

<h1></h1>和h1:before{ content: "title";}的工作方式是否与<h1>title</h1>相同？

我正在创建一个响应式页面，我的名字在顶部作为h1标签之间的标题，例如“John Smith”但是在移动浏览器上它不适合导航所以我会喜欢在mbile浏览器上说“John”。我可以使用:before在我的css中使用媒体查询来实现此目的，以根据视口大小设置内容。

我只是需要知道它是否会因为SEO原因而在h1标签之间验证为“John Smith”？

Answer 1

我不确定:after和:before对SEO的影响。但是，当您使用此方法时，您将在样式表中放置内容，我认为这应该被认为是不好的做法。我会解决更多这样的问题：

HTML：

<h1>John <span class='hide-mobile'>Smith</span></h1>

CSS：

@media (max-width: 768px) {
  .hide-mobile {
     display: none !important;
  }
}

Answer 2

选择一个作为页面轮廓中应使用的标题，最好是大页面。然后添加移动噱头。

<h1 class="suppressed-on-mobile">John Smith</h1>
<div class="mobile-heading">John</div>

CSS：

.mobile-heading {
  display: none;
}

@media screen and (max-width: 400px) {
  .suppressed-on-mobile {
    display: none;
  }

  .mobile-heading {
    display: block;
    font-size: 150%;
    /* etc... */
  }
}

这样，文本浏览器，搜索引擎，屏幕阅读器等知道要显示的内容。

搜索引擎不会解析content属性，因此您不应该在CSS规则中包含实际内容。

Answer 3

对于通过mediaqueries移动设备，您可以在word-spacing上设置一个{h} white:space:nowrap;，overflow:hidden和<h1>，以便在屏幕上发送困扰您的额外字词：）。

h1：在{}之前工作吗？

3 个答案: