Как позиционировать :: до и :: после родителя выше и рядом друг с другом - PullRequest
Новая
       17

Как позиционировать :: до и :: после родителя выше и рядом друг с другом

0 голосов
/ 08 июля 2019

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

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

<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

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

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Оказалось невозможным стилизовать :: 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 голосов
/ 08 июля 2019 

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>
...