How will using the :after and :before pseudo-elements affect search engine indexing?

Question

css

there is html code:

<div class="wrapper">
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 one"></div>
        <div class="grid_1 two"></div>
        <div class="grid_1 two"></div>
        <div title="Главная" class="grid_1 two gr"></div>
        <div title="Компания" class="grid_1 two gr"></div>
        <div title="Сервис" class="grid_1 two gr"></div>
        <div title="Продукция" class="grid_1 two gr"></div>
        <div title="Контакты" class="grid_1 two gr"></div>
      </div>

there is a css code:

.wrapper {
    position: absolute;
    display: inline;
    top: 74px;
    left: -2px;
    right: -2px;
    bottom: 0;
    z-index: 2;
    width: 958px;
    height: 306px;
    margin-right: auto;
    margin-left: auto;
  }
  .grid_1 {
    border: 2px #eee solid;
    margin-top: -2px;
    margin-right: -3px;

  }
  .grid_1:after {
    border: 2px #eee solid;
    border-radius: 7px;
    display: block;
    margin: -2px;
    content: attr(title);
  }
  .one, .one:after {
    height: 134px;
  }
  .two, .two:after {
    height: 50px;
  }

Now I'm interested in the question, I think whether it's worth it or not to use one trick. from the point of view of development (layout), this is the most correct (I think). but from the point of view of search indexing, I xs. in general, I draw up a topic on toster.ru

Answer 1

Use HTML5 tags and pseudo-elements for styling. Design should not directly affect search results in any way, and the absence of unnecessary elements in HTML that are not related to content will most likely simplify the task for search engines.

Answer 2

@abdurahmanich , I beg to differ - search engines, as far as I know, pay attention to selectors like "main", "content", "menu", etc. and try to apply heuristics to throw out "unnecessary". They also take into account the size by which a particular text is typed to determine the weight. They probably won't index attr(title) but I can't give 100% advice.
You can try to do it easier - use attr (title) on some pages and use more classic options on some pages.