Как расположить два псевдоэлемента ::before и ::after над родительским и рядом друг с другом? И до, и после являются текстовыми значениями. Они различаются по цвету и содержанию.

Идеальным решением было бы создать элемент ::before, дать ему display:block, чтобы он появился над родительским элементом, а затем дать себе ::after, но невозможно определить псевдоэлемент для другого pseudoelement .

<h1>
    <svg></svg>
    <span> 
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying 
    </span>
</h1>
span::before{
  content:'Lorem ipsum, or lipsum';
}

span::after{
  content:'.';
  color: red;
}

Ожидаемый результат:

Lorem ipsum, or lipsum.

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying

Содержимое ранее обычно короче, чем содержание, но не всегда.

-1
user2923339 8 Июл 2019 в 11:00

2 ответа

Лучший ответ

Оказалось невозможным стилизовать :: before и :: after, чтобы придерживаться рядом друг с другом и над их родителями независимо от размера 3 элементов. Я ввел новый элемент в структуру DOM:

        <h1 class="title">
            <span class="title__main" :data-before="mainTitle" :data-after="."></span>
            <span class="title__sub">{{subTitle}}</span>
        </h1>

И теперь все намного проще расположить.

0
user2923339 9 Июл 2019 в 07:51
h1.extra span {
  display: flex;
  flex-wrap: wrap;
  background: gold;
}

h1.extra span::before {
  font-size: 1rem;
  content: attr(data-before);
  order: -1;
}

h1.extra span::after {
  font-size: 1rem;
  content: attr(data-after);
  order: -1;
  color: red;
  flex-basis: 50%;
  flex-grow: 1;
}
<h1 class="extra">
  <svg></svg>
  <span data-before="Lorem ipsum, or lipsum" data-after="..."> 
  Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying 
</span>
</h1>
-1
yunzen 8 Июл 2019 в 11:06